0

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

这个想法（更清楚）是下拉菜单的普通类有 display: none; 设置它，但如果它是类“open”的东西的后代，那么它有 display: block;

所以，事不宜迟，这就是我目前所拥有的：“openable”是一类“父”元素，可以单击它来添加“open”类。

<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 中（请记住，这本质上是用于下拉菜单）

4

4 回答 4

1

jsBin 演示

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

<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');
});
于 2012-09-26T22:26:03.247 回答
1

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');
    }
});
于 2012-09-26T22:34:10.703 回答
0

让除了可打开的类元素之外的所有东西都执行你的点击方法怎么样？

var openable = $(".openable");
$("div, h2").not(openable).click(function(){
    $('.cont').slideUp().prev('.openable').removeClass('opened');
});
于 2012-09-26T22:32:06.970 回答
0

我不相信您可以这样做$(document).click()，这并没有错，但是您永远不会单击文档本身，而是单击其子级。

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

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

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

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

于 2012-09-26T22:20:14.117 回答