使用jQuery单击页面中的某个位置时，请关闭下拉菜单

Close a Dropdown menu when you click somewhere in the page with jQuery?

本文关键字：位置 下拉菜单 单击 jQuery 使用      更新时间：2023-09-26

我有一个简单的下拉菜单，显示在内联文本链接上。当点击链接时，我使用jQuery点击事件来显示下拉菜单。

我想做的是，当点击任何位置时，让下拉菜单返回到隐藏状态。现在，您必须再次单击链接才能关闭菜单。

Demohttp://codepen.io/jasondavis/pen/sFpwK?editors=101

jQuery

// Show Dropdown Menu when link is clicked
$(function(){
  $(".inline-dropdown-menu").click(function(e){
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
  });
});

HTML

<span class="inline-dropdown-menu">
    <a href="">My Link that reveals a DropDown Menu when clicked on<span class="caret"></span></a>
    <ul class="inline-dropdown-menu-list">
        <li class="bottomBorder">
            <a href="" tabindex="-1">alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">2. the first report, alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">3. the first report, alphabetically</a>
        </li>
    </ul>
</span>

http://codepen.io/anon/pen/JmLsB

$(function () {
    $(".inline-dropdown-menu").click(function (e) {
        $(".inline-dropdown-menu-list").hide(); // to hide other drop down
        $(this).find(".inline-dropdown-menu-list:first").toggle();
        e.preventDefault(); // Stop navigation
    });
});
// to hide drop down if you click other than inline-dropdown-menu class
$(document).click(function (e) {
    var container = $(".inline-dropdown-menu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".inline-dropdown-menu-list").hide();
    }
});

这可能很有用：

var flag = false;
$(".inline-dropdown-menu").click(function(e){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
    flag = true;   
});
$('body').click(function(){
    if (flag) {
        flag = false;
        return;
    }
    $(".inline-dropdown-menu-list").not(':hidden').hide();
});

尝试这个

$(function(){
  $(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
 });
$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});
});

当您的链接被点击时，您必须在正文中添加一个点击事件。单击正文时，您可以隐藏下拉列表，也可以再次删除正文上的事件。我使用了setTimeout来防止双击。我还为body上的click事件添加了一个名称空间（click.ddl），这样您就可以拥有其他click事件。

请查看此演示：http://jsfiddle.net/gdxyef46/2/

// Show Dropdown Menu when link is clicked
$(function(){
  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Stop navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();
      //to prevent double click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("body clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });
});

如果没有唯一的类名，您可以循环遍历它们并检查它们是否可见，如果可见，请关闭它。这段代码不起作用（抱歉），但希望能为您指明正确的方向。我个人喜欢使用on("click")和click()，以防您处理DOM还不能访问的动态元素。

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });

您也可以基于$('.inline-dropdown-menu-list').length创建一个计数器，并为每个计数器分配一个data-id，这样您就可以匹配并跟踪它们。希望这能有所帮助。

如果我正确理解你，当你点击主体时，你想复制下拉箭头正在做的事情。如果是这样，那么试试这个：

$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});

链接到演示。但请注意，如果你再次点击正文，它将再次显示下拉菜单。如果你不想这样的话，你可以试着把它去掉。

相关文章：