Question

我有一个内容（左侧）和侧边栏（右侧）的页面。对于屏幕宽度<= 480px，将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函数每次都会添加一个 new 事件处理程序，并在每个窗口调整大小时执行所有。

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

Answer 2

我相信您的问题是在调整窗口大小时连续调用滑动函数。而不是取消选中此事件，尝试使用如下的事件处理程序来控制它：

使用.one()：

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

要记住的另一件事是，如果想要将其显示为隐藏，则可能需要先使用.slideDown()而不是.slideToggle()。

这是一个jQuery引用＆＃39; one＆＃39;功能：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上最稳定的最新版本＆lt; 9。如果你不介意IE＆lt; 9上的支持，请使用jQuery 2.0或更高版本。

使用jQuery显示/隐藏菜单

3 个答案: