Question

我在导航栏上创建了一个侧面导航栏，通过单击远离导航栏按钮的任何点，导航栏折叠和按钮无法点击

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

$(document).click(function (e) {
    if ($('#wrapper').hasClass('toggled')) {
        $("#body").click(function (e) {
            e.preventDefault();
            $("#wrapper").removeClass("toggled");
        });
    }
});

Answer 1

在点击事件之后不要绑定点击事件。
我看不到$(document).click(function(e){ })

的使用

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

$("#body").click(function (e) {
    e.preventDefault();
    if ($('#wrapper').hasClass('toggled'))
        $("#wrapper").removeClass("toggled");
});

如果需要将#上的$('#body')放在<body>标记上并且<body>标记中没有id，则可以删除它。因为#是一个ID选择器。

Answer 2

实际上，您是在click元素上覆盖$("#menu-toggle")事件处理程序，该定义是在以下位置进行的：

$("#menu-toggle").click(function (e) {

通过在行click上附加一个document事件：

$(document).click(function (e) {

由于document是页面中的全局元素，而所有其他元素都在页面内部，因此通过将click事件处理程序附加到document，您将忽略所有其他{{ 1}}页面上的处理程序。

编辑：

代码中的另一个问题是您将click事件处理程序附加到另一个click事件处理程序中：

click

这将在每次单击$(document).click(function (e) { if ($('#wrapper').hasClass('toggled')) { $("#body").click(function (e) { e.preventDefault(); $("#wrapper").removeClass("toggled"); }); } });时将第二个处理程序附加到body元素，这是一种非常错误的方法，因为您总是会附加一个新的document事件处理程序点击click会导致您的应用性能下降。

我的JavaScript阻止了我的代码正常工作

2 个答案: