当用jQuery在页面中点击某处时关闭下拉菜单？

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

我想要做的是有一个点击任何地方时，下拉菜单回到隐藏状态。现在你必须再次点击链接关闭菜单。

演示http://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>

来源

2014-10-20 JasonDavis

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(); 
    } 
});

来源

2014-10-20 06:29:22

试试这个

$(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(); 
}); 

});

来源

2014-10-20 05:56:54 Kaustav

'e.stopPagagation（）;'似乎是魔法的地方 – JasonDavis 2014-10-20 07:11:24

@jasondavis的确的确是 – Kaustav 2014-10-20 08:45:15

-1

如果我理解正确，你要复制个什么当你点击正文时，下拉箭头正在做。如果是这样，那么试试这个：

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

链接到demo。但请注意，如果您再次点击正文，它会再次显示下拉菜单。如果你不想要这个，你可以四处游戏去除。

来源

2014-10-20 06:15:03 Aameer

这可能是有用的：

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(); 
});

来源

2014-10-20 06:29:43 tvahid

不错的做法！ – JasonDavis 2014-10-20 07:10:52

当用户点击您的链接，你将有一个点击事件添加到身体。点击正文后，您可以隐藏下拉列表，并再次移除正文上的事件。我用setTimeout来防止双击。我还将一个名称空间添加到正文（click.ddls）上的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); 
    }); 

});

来源

2014-10-20 06:30:54

当点击多个链接时，这并不是真正的工作 – M98 2014-10-20 06:34:56

@Kermani看到更新的答案 – 2014-10-20 06:43:54

Downvoters ..为什么？所有其他答案在整个时间都会在身体上分配点击事件，这是不好的，因为它填满了记忆。此外，没有使用命名空间... – 2014-10-20 06:52:02

没有独特的类名，你可以通过他们循环，并检查它们是否是可见的，如果是这样，将其关闭。此代码无法正常工作（道歉），但希望能指引您朝正确的方向发展。如果您正在处理DOM尚未访问的动态元素，我个人喜欢使用on("click")与click()。

 $('*').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每个这样你就可以匹配，并跟踪它们。希望这可以帮助。

来源

2014-10-20 08:15:36 cpk

当用jQuery在页面中点击某处时关闭下拉菜单？

回答

相关问题