jquery - 尝试在 2 种不同的屏幕尺寸下切换此 jQuery 菜单

Question

我正在研究这个导航，并且我已经获得了它在两种不同屏幕尺寸上如何工作的代码。 600 像素及以下，然后是超过 600 像素的任何内容。每个菜单在每个尺寸下都可以独立工作，但我似乎无法让它们来回移动菜单，就像你要以常规尺寸播放菜单一样，缩小屏幕，以较小尺寸播放菜单，然后尝试再次展开您的菜单，但菜单没有按应有的方式重新展开。起初我以为是因为我使用了 jQuery toggle()，所以我将其更改为一个 if/else 函数，它会干扰目标类的 CSS 显示。但是当屏幕展开时，菜单的显示仍然不会恢复为 block 状。我是不是忽略了什么？

这是 jsFiddle .

jQuery(有问题的代码)

$("#menu-icon").click(function(){

            if ( $(".menu-item").css("display") == "none" ) {
                $(".menu-item").css("display", "block");
            } 
            else if ( $(".menu-item").css("display") == "block" ) {
                $(".menu-item").css("display", "none");
            }
        }); 

CSS(有问题的代码)

menu-item {
display: block;
}

@media screen and (max-width: 600px) {

menu-item {
display: none;
}

}

我认为这不是 HTML 造成的，但它已完整包含在 jsFiddle 中。

Answer 1

问题出在逻辑上。如果显示小菜单并且用户单击菜单按钮，则隐藏元素以“关闭菜单”，如果显示小菜单，这很好。但是，如果您将窗口变大，则没有任何内容可以单击菜单按钮来“显示菜单”，因此元素仍然隐藏。

您可以将一个函数绑定(bind)到窗口调整大小事件并检查窗口宽度，如果它超过 600 像素，则强制应用重新显示元素。这将确保无论小菜单处于什么状态，如果窗口变大，元素都是可见的:

Working jSfiddle

$(document).ready(function(){ 
    var $window = $(window);
    var $items = $(".menu-item");
        
    $("#menu-icon").click(function(){
        $items.toggle();
    });
    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 600) {
            //if the window is greater than 600px wide then turn on jScrollPane..
            $items.show();
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $window.resize(checkWidth);
});