我必须建立一个点击触发的小下拉系统。我已经设法处理“点击 div”问题(感谢之前发布的这个问题)。
我可以隐藏当前下拉菜单,单击另一个下拉菜单的触发器或单击下拉菜单本身。所以,问题是这些:
- 点击当前下拉菜单的触发器没用;当其他事情正常工作时,下拉菜单不会消失
- 在当前下拉列表中单击(例如: .divider 项目)会导致下拉列表消失
所以,这里是 html 代码(假设我在标题中有多个下拉菜单)
...
<div id="header" class="navbar">
<div class="line">
<a href="#" class="logo">Site Name</a>
<ul class="nav right">
<li>
<a href="#" class="has-drop">Item 1</span>
<ul class="dropdown-menu">
<li><a href="#">Action A</a></li>
<li><a href="#">Action B</a></li>
<li><a href="#">Action C</a></li>
<li class="divider"></li>
<li><span>Inline note</span></li>
</ul>
</li>
<li>
<a class="has-drop" href="#">Item 2</a>
<ul class="dropdown-menu">
<li><a href="#">Action D</a></li>
<li><a href="#">Action E</a></li>
<li><a href="#">Action F</a></li>
<li class="divider"></li>
<li><a href="#">Action G</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- end #header -->
...
这实际上是我正在使用的 JS 代码,在一个专用文件中
$(document).ready(function(){
$("html").on({
click: function(e) {
$(".dropdown-menu.opened").toggleClass("opened");
}
});
$(".nav > li > a").on({
click: function(e){
e.stopPropagation();
$(".dropdown-menu.opened").toggleClass("opened"); // should close each .dropdowns before opening the current one
$(e.target).siblings(".dropdown-menu").toggleClass("opened");
}
});
});
为什么你认为当我重新点击它的触发器时下拉菜单没有隐藏?因为在里面$(".nav > li > a").on()
做几乎同样的事情?
此外,有一种方法可以防止单击其中一些子项时下拉隐藏本身?但也许这与另一个问题更相关,我不知道。
最后但同样重要的是:在您看来,这是完成整个事情的正确方法吗?
谢谢大家
编辑:感谢@Beetroot-Beetroot 我设法解决了这个问题,所以这是当前的工作代码 $(document).ready(function(){
$("html").on("click", function(e) {
$(".dropdown-menu.opened").removeClass("opened");
});
$(".nav").find("li :first-child").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
$(".dropdown-menu").not($thisMenu).removeClass("opened");
});
});
“秘密”是 .not() 的巧妙使用,我现在对此了解得更多。
我只是将目标(可以<a>
或<span>
)更改为更通用的目标。不确定长期的表现,但肯定是一个很好的起点。
从
$(".nav").find("a.has-drop").on(...
到
$(".nav").find("li :first-child").on(...
也在这里
$(this).closest(".nav").find(".dropdown-menu").not(... 我使它更通用 $(".dropdown-menu").not(...那是因为我想隐藏所有打开的下拉菜单。以前的行为是只考虑一种目标和一个原点区域(例如:也许我需要这些下拉菜单以及标题和某种工具栏内的内容)。
编辑 2:@Beetroot-Beetroot 再次帮助了我。正如他所建议的那样,当我在 jsFiddle 中移植当前代码时,突然解决方案本身就出现了。所以现在这$("html").on("click", ...
部分看起来像这样
$("html").on("click", function(e) {
if ( $(e.target).hasClass("dropdown-menu") || $(e.target).parents(".dropdown-menu").length ) {
// do nothing, basically
} else {
$(".dropdown-menu.opened").removeClass("opened");
}
});
基本上我只是看点击$("html")
是否有做下拉下拉菜单的事情。如果是,什么也不做。如果不是,那么这确实意味着我点击了任何地方,但没有点击下拉菜单的位置。