使用 jQuery 显示/隐藏菜单

Question

我有一个页面，里面有内容（左边）和侧边栏（右边）。对于屏幕宽度 <= 480px，2div 一个放在另一个下面（100% 宽度）。可见的"显示/隐藏"按钮旨在在单击时切换侧边栏的可见性。我使用

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

为此。

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

问题：如果我切换到宽屏，然后再次切换回窄屏（宽度 <= 480px），单击按钮会产生"来回"错误。

我的错误在哪里？

谢谢！

Answer 1

我相信

原因是这段代码：

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

每次运行函数showSidebar时执行，即每次调整窗口大小时。JQuery 的 click 函数每次都会添加新的事件处理程序，并在每次调整窗口大小时执行所有这些事件处理程序。

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

Answer 2

我相信

您的问题是在调整窗口大小时会连续调用幻灯片函数。与其不选中此事件，不如尝试使用事件处理程序对其进行控制，如下所示：

使用.one() ：

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

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

以下是对"one"函数的jQuery引用： http://api.jquery.com/one

Answer 3

这样的东西？ 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() 中调用您的单击，因为每次调用该函数时，它都会绑定 Click 事件。 调整大小会多次触发showSidebar()，因此单击会多次绑定。 此外，您应该使用 jQuery 1.11 作为最低版本，因为它是在 IE<9 上稳定的最新版本。 如果您不介意对 IE<9 的支持， 使用 jQuery 版本 2.0 或更高版本。