Question

我有一个带下拉菜单的菜单，其中LI元素在点击时获得一个activeclass。经过很多努力之后，我设法创建了一个脚本，将一个活动类设置为我隐藏的div，它在点击上显示为网站的叠加层（在下拉列表下）。一切都按照应有的方式工作，除非我在下拉列表外单击以关闭它而不是单击menubutton。这不会改变我的叠加div的类 - 如何更改我的脚本以处理下拉列表外的点击，以及我应该在此处定位什么？

隐藏的div：

<div id="site-overlay"></div>

脚本：

$.noConflict();
jQuery(document).ready(function(){
    jQuery('li').on('click', function(){
        if(jQuery(this).hasClass('active')) {
            jQuery("#site-overlay").addClass("active");
        } else {
            jQuery("#site-overlay").removeClass("active");
        }
    })
});

Answer 1

这将有效：

$.noConflict();
jQuery(document).ready(function () {
    jQuery('li').on('click', function () {
        if (jQuery(this).hasClass('active')) {
            jQuery("#site-overlay").addClass("active");
        } else {
            jQuery("#site-overlay").removeClass("active");
        }
    });

    jQuery("#site-overlay").click(function () {
        jQuery(this).removeClass("active");
    });
});

注意新的事件处理程序。

Answer 2

您可以向文档正文添加点击事件，然后检查点击位置：

$(document).click(function(event) { 
    if(!$(event.target).closest('#site-overlay').length) {
        if($('#site-overlay').is(":visible")) {
            $('#site-overlay').hide()
        }
    }        
})

Answer 3

jQuery('li').on('click', function(){
    ...
}

仅当您点击＆＃39; li＆＃39;元件。但是点击外面＆＃39; li＆＃39;元件？尝试添加或替换：

jQuery('body').on('click', function(){
    if(jQuery('.megamenu li').hasClass('active')) {
        jQuery("#site-overlay").addClass("active");
    } else {
        jQuery("#site-overlay").removeClass("active");
    }
}

单击时添加/删除类 - 如何在第二个单击区域中删除该类？

3 个答案: