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

Question

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

这里是 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

问题出在逻辑上。如果显示小菜单并且用户单击菜单按钮，则隐藏项目以“关闭菜单”，如果显示小菜单，这很好。但是，如果你把 window 变大，没有点击菜单按钮来“显示菜单”所以元素仍然隐藏。

您可以将函数绑定到 window 调整大小事件并检查 window 宽度，如果宽度超过 600px，则强制应用重新显示项目。这将确保无论小菜单处于什么状态，如果 window 变大，项目是可见的：

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);
});

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

Trying to toggle this jQuery menu at 2 different screen sizes

jquery

html

css

toggle

Working jSfiddle