Question

我正在尝试创建一个菜单，当单击div时，它会打开另一个包含内容的div。当用户点击其他地方时，我希望它关闭。该部分似乎有效，但是当点击div本身时它也会关闭。

用户应该可以在div中单击而不关闭它，

我使用此question的答案作为指南，但他们使用的是有序列表而不是div，是否存在e.target.class的问题？

感谢您的帮助。

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.header-menu-container').hide();
    $(this).next('.header-menu-container').slideDown();
});

$(document).click(function (e) {
    if (e.target.class == 'header-menu-container' || e.target.class == 'header-menu-contents') 
        return;
    $('.header-menu-container').slideUp();
});

请参见此处：http://jsfiddle.net/75JaR/3/

Answer 1

将class更改为className ...

$(document).click(function (e) {
    if (e.target.className == 'header-menu-container' || e.target.className == 'header-menu-contents') return;
    $('.header-menu-container').slideUp();
});

<强> updated jsfiddle...

顺便提一下，如果你向容器和内容元素添加任何进一步的类，那么上面的代码将不起作用。以下代码更合适，因为无论您添加多少额外的类都可以使用...

$(document).click(function (e) {
    var $this = $(e.target);
    if ($this.hasClass("header-menu-container")) return;
    if ($this.hasClass("header-menu-contents")) return;
    $('.header-menu-container').slideUp();
});

Answer 2

在单击div时停止冒泡到文档，然后您不必进行类检查。

http://jsfiddle.net/75JaR/7/

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.header-menu-container').hide();
    $(this).next('.header-menu-container').click(function(e){
        e.stopPropagation();
    }).slideDown();
});

$(document).click(function (e) {
    $('.header-menu-container').slideUp();
});

Answer 3

改为使用：

if ( $(e.target).is('.header-menu-container') || $(e.target).is('.header-menu-contents') )

Answer 4

在div上创建一个click事件，一旦点击它就停止隐藏它。

    $('.trigger').click(function (e) {
       e.stopPropagation();
    $('.header-menu-container').hide();
    $(this).next('.header-menu-container').slideDown();
    });

$(document).click(function (e) {
    if (e.target.class == 'header-menu-container' || e.target.class == 'header-menu-contents') return;
    $('.header-menu-container').slideUp();
    $('.header-menu-container').click(function(){

       return false;
    });
});

点击外部div隐藏，点击里面隐藏

4 个答案: