尝试在两种不同的屏幕大小下切换此jQuery菜单

我正在研究这个导航，我有两个不同屏幕尺寸的代码。600px及以下，然后是任何超过600px的。每个菜单在不同大小下都可以独立运行，但我似乎无法让它们来回运行，比如如果你要以常规大小播放菜单，缩小屏幕，以较小的大小播放菜单，然后尝试再次扩展菜单，菜单不会按应有的方式重新扩展。起初我认为这是因为我使用的是jQuery

toggle（）

，所以我将其更改为一个

if/else

函数，该函数会干扰目标类的CSS显示。但当屏幕展开时，菜单的显示仍然不会恢复为块。我是不是忽略了什么

这是你的电话号码

jQuery（有问题的代码）

CSS（有问题的代码）

---

我不认为是HTML导致了这种情况，但它完全包含在JSFIDLE中

问题在于逻辑。如果正在显示小菜单，并且用户单击菜单按钮，则隐藏项目以“关闭菜单”，如果正在显示小菜单，这是正常的。但是，如果你把窗口变大了，没有任何东西点击菜单按钮来“显示菜单”，所以元素仍然是隐藏的

您可以将一个函数绑定到窗口大小调整事件，并检查窗口宽度，如果超过600px，则强制应用程序重新显示项目。这将确保无论小菜单处于何种状态，如果窗口变大，项目都可见：

---

耶！它工作得很好！非常感谢。我对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");
            }
        }); 

menu-item {
display: block;
}

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

menu-item {
display: none;
}

}

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