简单的响应导航菜单

Question

我在HTML中创建了这个菜单：

<div class="trigger" style="display:none;">menu</div>


<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact</a></li>            
    </ul>
</div>

然后我写了一些CSS代码让它看起来很敏感，我在400px上写道导航将被隐藏，只有当你点击它会显示的按钮时，它才能正常工作

问题是如果我点击菜单（在400px上）来显示它，当我将窗口调整到更高的尺寸时，我再次单击以隐藏它，导航保持隐藏状态。

示例：http://jsfiddle.net/b6pdy89u/

创建此导航的最佳方法是什么？

Answer 1

添加以下代码。

$(window).resize(function () {
    $('.nav').removeAttr('style');
});

作为替代方案，您可以这样做。的 DEMO

$('.trigger').click(function () {
    $('.nav').slideToggle(function () {
        var hidden = $(this).is(':hidden');
        if (hidden)
            $(this).removeAttr('style');
    });
});