0

感谢您的任何帮助。这个网站是一个很好的资源。

我的问题：当在我正在处理的网站上打开菜单时，我还会在（主体）前面添加一个 div 叠加层并给它一个类，该类应该允许它可以单击以关闭菜单并自行删除。这样用户就可以点击菜单外的任何地方来关闭它，而不是要求他们点击“关闭”按钮。这听起来很简单，但我无法让它发挥作用。

我知道存在“绑定”问题，因为我正在向 DOM 添加内容，所以我使用 .on() 而不是 .click()，认为这将允许我的触发事件绑定到新创建的 div。我也尝试过 .bind()，但老实说，我现在只是在猜测代码，因为我不明白它们之间的区别。我不想为看起来如此简单的事情使用插件，所以我希望我犯的一些简单错误对于那些有更多经验的人来说会立即显而易见，即你们所有人。;) 这是我的 jQuery 函数。除了单击“#the-overlay”没有任何作用之外，一切都按我的意愿进行。

    $('.the-toggle').on("click", function(){
    $(".the-menu").slideToggle();
    $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

    if ($('#the-overlay').length) {
        $('#the-overlay').remove();
    }
    else {
        var content = '<div id="the-overlay" class="the-toggle"></div>';
        $('body').prepend(content);

        var docHeight = $(document).height();
        $("#the-overlay").height(docHeight);    
    }
});

如果我的问题以某种方式违反规则，请原谅。我确实在寻找避免重复的答案，但我能找到的所有答案都表明我的问题可以用 .on() 或已弃用的 .live() 来解决。

谢谢你。

4

2 回答 2

1

使用委托语法：

$(document.body).on("click",'.the-toggle', function(){...});
于 2013-07-08T11:55:05.430 回答
-1

请用以下代码替换您的代码。它会起作用的。

$(document).ready(function(e) {
    theToggle();
});
function theToggle(){
    $('.the-toggle').on("click", function(){
        $(".the-menu").slideToggle();
        $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

        if ($('#the-overlay').length) {
            $('#the-overlay').remove();
        }
        else {
            var content = '<div id="the-overlay" class="the-toggle"></div>';
            theToggle();
            $('body').prepend(content);             
            var docHeight = $(document).height();
            $("#the-overlay").height(docHeight);    
        }
    });
}
于 2013-07-08T11:59:55.440 回答