Question

我正在处理此导航，并且我已经获得了有关它如何在两种不同屏幕尺寸上工作的代码。 600px及以下，然后超过600px。每个菜单在每个尺寸上都可以独立工作，但我似乎无法让菜单来回走动，就像你要按常规尺寸播放菜单一样，收缩屏幕，播放菜单时较小的尺寸，然后尝试再次扩展菜单，菜单不会重新扩展它应该的方式。起初我以为是因为我使用的是jQuery toggle()，因此我将其更改为if/else函数，该函数与目标类＆＃39;混淆。 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

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

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

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

试图以两种不同的屏幕尺寸切换这个jQuery菜单

1 个答案:

Working jSfiddle