jQuery Toggle 不会在窗口调整大小时显示

Question

我正在使用 jQuery slideToggle 函数和媒体查询。

问题是当我将窗口调整为小尺寸时，会出现切换链接。现在，如果我点击切换，它可以正常工作，但是当我将窗口调整回大尺寸时，隐藏的元素仍然没有出现。

如果我不点击切换链接，然后将窗口重新调整为大尺寸，它可以正常工作。

Demo看问题：

请在此处查看演示，您可以在其中看到问题： http://jsfiddle.net/3Jj7J/

将窗口大小调整为您看到“主菜单”链接的小尺寸。当您单击它时，您将看到切换。现在如果你把它改回大尺寸，正常的链接仍然不会出现。

这是我的代码：

HTML：

<div class="bar">
    <a class="toggle" href="#">MAIN MENU</a>
</div>

<div class="nav">
    <div class="wrap">
        <ul>
            <li>Link 1</li>
             <li>Link 2</li>
        </ul>
    </div>
</div>

CSS：

.bar{
    display: none;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
     .nav ul { 
        display: none;
    }

    .bar{
        display: block;        
    }
}

jQuery：

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});

Answer 1

添加窗口调整大小事件处理程序：

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});  

jQuery(window).on('resize', function(){   
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
         menu.show();   
    }
});  

jsFiddle：http://jsfiddle.net/3Jj7J/1/

更新：这是替代解决方案（只需删除内联 display 属性，因此它将使用 css 规则）。

jQuery(window).on('resize', function(){     
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
        menu.css({'display':''});   
    }
});  

DEMO

Answer 2

我已经阅读了您的问题并自己进行了测试。现在，我通过执行以下操作使链接出现：

CSS：

        #bar {
        display: none;
        color: #000000;
        border: 1px solid red;
    }

    @media screen and (max-width: 500px) {
         #nav ul { 
            display: none;
        }

        .bar{
            display: block;        


   }
}

亲眼看看 (http://jsfiddle.net/hSZ7t/) 我所做的是更改了您的 CSS。而不是你使用：

.bar {

现在是：

#bar {