带有jQuery的菜单折叠和一个用于切换折叠的按钮

Question

这是我想要达到的目标

• 如果窗口尺寸小于768像素，则该菜单会折叠成一个较小的菜单
• 当窗口大小> 768 px时，菜单将再次恢复到其原始大小
• 有一个按钮可以切换菜单的折叠

这就是我尝试解决问题的方法： http : //jsbin.com/vefopuka/1/edit

但是我发现，尽管菜单的确在屏幕尺寸改变时改变了它的尺寸（或类），但该按钮不会切换菜单的折叠状态。

代码中是否有冲突？ 问题出在哪儿？

在此先感谢您的任何建议。

Answer 1

尝试对按钮使用其他常数值： http : //jsfiddle.net/5xbp5/

$(document).ready(function () {
    function togglesidebar(flag) {
        if (flag == -1) {
            $('#xs-menu').toggleClass('show hide');
            $('#lg-menu').toggleClass('show hide');
        } else if (flag == 1) {
            $('#xs-menu').addClass('show').removeClass('hide');
            $('#lg-menu').addClass('hide').removeClass('show');
        } else {
            $('#xs-menu').addClass('hide').removeClass('show');
            $('#lg-menu').addClass('show').removeClass('hide');
        }
    }

    $('#collapse').click(function(){
        togglesidebar(-1);
    });

    $(window).resize(function () {
        windowsize = $(window).width();
        if (windowsize < 768) {
            togglesidebar(1);
        } else {
            togglesidebar(0);
        }
    });

});

您的函数调用$('#collapse').click(togglesidebar); 没有参数似乎不调用togglesidebar(flag)