javascript - 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