使用 jQuery 显示/隐藏菜单答案

【问题标题】：Show/hide menu with jQuery使用 jQuery 显示/隐藏菜单
【发布时间】：2015-03-30 03:02:17
【问题描述】：

我有一个包含内容（左侧）和侧边栏（右侧）的页面。对于屏幕宽度

$(".sidebar .box").slideToggle(200);

为此目的。

在jsfiddle 上一起查看所有内容。

问题：如果我切换到宽屏，然后再次切换回窄屏（宽度

我的错误在哪里？

谢谢！

【问题讨论】：

请向我们展示您的代码。
jquery slideToggle call once的可能重复

标签： javascript jquery css menu show-hide

【解决方案1】：

我相信你的问题是当你的窗口调整大小时你的幻灯片函数会被连续调用。与其让此事件发生未经检查，不如尝试使用如下事件处理程序来控制它：

使用.one():

$('#your_element_id').one("click", function () {     
    $('.your_css_style_class').slideToggle(200); 
});

要记住的另一件事是，如果您希望将其隐藏，您可能希望使用.slideDown() 而不是.slideToggle() 开始。

这里是 jQuery 对“one”函数的引用：http://api.jquery.com/one

【讨论】：

@SpencerWieczorek 它不一定是重复的。该问题的答案将处理程序限制为执行一次，这可能是解决 OP 问题的方法，但处理该问题的更好方法是首先不要多次绑定同一个处理程序。

【解决方案2】：

像这样？ http://jsfiddle.net/jqdvj42u/3/

$(document).ready(function() {
     $("a.expander").click(function () {
        $(this).toggleClass('close');
        $(".sidebar .box").slideToggle(200);
    });
});

function showSidebar() {   
    if ($(window).width() <= 480) {
        // Close sidebar when window width <= 480px
        $(".sidebar .box").removeClass('open');
        // Click expander button to show/hide sidebar

    } else {
        $("a.expander").removeClass('close');
        // Open sidebar when window width > 480px;
        $(".sidebar .box").addClass('open');
    }
}
showSidebar();

$(window).resize(showSidebar);

不应在showSidebar() 内调用您的点击，因为每次调用该函数时它都会绑定点击事件。 resize 多次触发showSidebar()，所以点击被绑定多次。此外，您应该使用 jQuery 1.11 作为最低版本，因为它是在 IE

【讨论】：

【解决方案3】：

我相信原因是这段代码：

$("a.expander").click(function () {
    $(this).toggleClass('close');
    $(".sidebar .box").slideToggle(200);
});

执行每次函数showSidebar 运行，也就是每次调整窗口大小时。 JQuery 的click 函数每次都会添加一个new 事件处理程序，并在每次调整窗口大小时执行所有个。

解决方案是将click 处理程序注册移到函数之外。

【讨论】：