Question

这是我想要实现的目标

如果窗口大小＆lt;
菜单将折叠成较小的菜单。 768px
当窗口大小＆gt;时，菜单将再次恢复为原始大小。 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)

使用jQuery进行菜单折叠，并使用按钮切换折叠

1 个答案: