当您使用jQuery单击页面中的某个位置时，关闭下拉菜单？
当您使用jQuery单击页面中的某个位置时，关闭下拉菜单？
提问于 2014-10-20 05:48:33
我有一个简单的下拉菜单，我是显示在内联文本链接。当单击链接时，我使用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>回答 6
Stack Overflow用户
回答已采纳
发布于 2014-10-20 06:29:22
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();
}
});Stack Overflow用户
发布于 2014-10-20 06:29:43
这可能是有用的：
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();
});Stack Overflow用户
发布于 2014-10-20 05:56:54
尝尝这个
$(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();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26459226
复制相关文章
相似问题
腾讯云开发者
