Show/hide 菜单 jQuery

Question

我有一个包含内容（左侧）和边栏（右侧）的页面。对于 <= 480px 的屏幕宽度，2 div 一个放在另一个下面（100% 宽度）。变为可见的 "Show/Hide" 按钮用于在单击时切换侧边栏的可见性。我用

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

为了这个目的。

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

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

我的错误在哪里？

谢谢！

Answer 1

我相信原因是这段代码：

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

每次执行函数 showSidebar 是运行，这是每次 window 调整大小时。 JQuery 的 click 函数每次添加一个 new 事件处理程序，并在每个 [=] 上执行 all 27=]调整大小。

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

Answer 2

我认为您的问题是在调整 window 大小时连续调用幻灯片函数。与其让这个事件不受控制地发生，不如尝试使用像这样的事件处理程序来控制它：

使用.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() 内调用，因为它会在每次调用该函数时绑定点击事件。 resize 多次触发showSidebar()，所以点击绑定了多次。此外，您应该使用 jQuery 1.11 作为最低版本，因为它是在 IE <9 上稳定的最新版本。如果您不介意对 IE<9 的支持，请使用 jQuery 2.0 版或更高版本。

Show/hide 菜单 jQuery

Show/hide menu with jQuery

javascript

css

jquery

menu

show-hide