使用jQuery显示/隐藏菜单

Question

我有一个页面，其中包含内容（左侧）和侧边栏（右侧）。 对于宽度小于等于480像素的屏幕，将2个div放在另一个下方（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() 。

这是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或更高版本。