Question

我正在尝试创建一种全局样式的下拉菜单，在单击其菜单图标时可以在打开和关闭之间切换，但只要单击页面上的任何其他位置也会关闭。我打开或关闭此下拉列表的方式是向下拉菜单的父级添加或删除一个名为“open”的类。

这个想法（更清楚）是下拉列表的正常类显示：none;设置它，但如果它是类“打开”的东西的后代，那么它有display：block;

所以，不用多说，这是我到目前为止所拥有的： “openable”是一类“父”元素，可以点击它们来添加“开放”类。

<script>
$(document).ready(function(){
    $('.openable').click(function(){
        if($(this).hasClass("open")){
            $(this).removeClass("open");
        }
        else{
            $(this).addClass("open");
        }
    });
});

它本身就可以正常工作 - 它可以作为下拉菜单的足够好的切换。当然，点击任何其他地方都不会关闭下拉菜单。

我显然无效的密切脚本是：

<script>
$(document).ready(function(){
    $(document).click(function(event) {
        var clicked = $(event.target);
            if(clicked.hasClass(".open")){
        }
        else{
            if($(".open").length > 0){
                $(".open").each(function(){
                    $(this).removeClass("open");
                });
            }
        }
    });
});
</script>

在页面上使用该脚本，下拉菜单完全停止工作，并且控制台不会丢失任何错误以供我解决。

有更好的方法吗？

由于

编辑：html标记类似于

<li class="navItem dropdown openable">
<span><img src="img/settings.png"></span>
  <ul class="subNav hubDrop">
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
</ul>
        </li>

每一个。 li标签在另一个ul内（记住，这主要是用于下拉菜单）

Answer 1

<强> jsBin demo

只是玩了一下（不知道你的标记。）

<div>
<h2 class="openable">ICON 1</h2>
<div class="cont"></div>
</div>

$('.openable').next('.cont').hide();
$('.openable').click(function(e) {
    e.stopPropagation();
    $('.opened').removeClass('opened');
    var d = $(this).next('.cont');
    var visib = (d.is(':visible')) ?
       /*yes*/   d.slideUp() :
       /*no */  ($('.cont').slideUp()) (d.slideDown().prev('.openable').addClass('opened')) ;
});

$(document).click(function(){
    $('.cont:visible').slideUp().prev('.openable').removeClass('opened');
});

Answer 2

jsFiddle Demo - 由于你没有提供任何HTML，我嘲笑了一些元素......

更新：您没有指定是否可以同时“打开”多个元素;在你当前的解决方案中他们可以，所以我保持这种行为。但是，要将其限制为打开，您可以在$('.open').not(this).removeClass('open');点击处理程序中添加.openable。

<小时/> 第一部分：为什么不使用.toggleClass

$(document).ready( function() {
    $('.openable').click( function() {
        $(this).toggleClass("open");
    });
});

第二部分：不需要第二个就绪处理程序;在第一个中，添加：

$(document).click( function(e) {
    var clicked = $(e.target).closest('.openable');
    if ( clicked.length == 0 ) {
        $(".open").removeClass('open');
    }
});

Answer 3

我不相信你可以做$(document).click()，这没有错，但是你永远不会点击文件本身，你单击的孩子。

我有一个非常相似的菜单系统，我用这种方式捕捉事件：

 $('.navTab').mouseover(function (event) { navEvent($(this), event.type); });

然后删除所有“打开”并重新应用“打开”到所选项目。

我相信您不想捕获所有文档点击事件。 jQuery Event.target

Answer 4

如果除了可打开的分类元素之外的所有内容都会执行您的点击方法吗？

var openable = $(".openable");
$("div, h2").not(openable).click(function(){
    $('.cont').slideUp().prev('.openable').removeClass('opened');
});

document.click删除页面上的行不正常

4 个答案: