jquery - 简单的响应式导航菜单

标签 jquery css

<分区>

我用 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 上导航将被隐藏,只有当你点击按钮时它才会显示,它工作得很好

问题是,如果我单击菜单(在 400 像素上)来显示它,然后当我将窗口调整到更高的尺寸时再次单击以隐藏它,导航将保持隐藏状态。

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

创建此导航的最佳方式是什么?

最佳答案

添加以下代码。

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

作为替代,您可以这样做。 <强> DEMO

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

关于jquery - 简单的响应式导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32165968/

上一篇:javascript - 更改 CSS 会破坏 Javascript Focus() 方法

下一篇:javascript - 如果名称为 x,则将类添加到输入字段

相关文章:

CSS 基本布局 - 3 个 div + 1 个 div 位于另一个 div 内,居中

ios - iPad 上的水平重叠

Javascript:防止空格键在指定的 div 中滚动

javascript - Angular JS - 显示/隐藏动态表的一些行

javascript - 使用 fabric.js 在 Canvas 上自由绘图

javascript - Ace 编辑器未在编辑器中显示 HTML 代码

javascript - 单击按钮后使重叠的 div 动画到前面

jquery - IE10 - 需要将 CSS 光标更改为 "pointer"在 contenteditable <div> 中 <span> 上的鼠标输入

javascript - PHP使用php jquery ajax显示和隐藏数据

javascript - jQuery UI 模态对话框 : button icons do not appear