<分区>
<分区>
我用 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/
相关文章:
CSS 基本布局 - 3 个 div + 1 个 div 位于另一个 div 内,居中
javascript - Angular JS - 显示/隐藏动态表的一些行
javascript - 使用 fabric.js 在 Canvas 上自由绘图
javascript - Ace 编辑器未在编辑器中显示 HTML 代码
javascript - 单击按钮后使重叠的 div 动画到前面
jquery - IE10 - 需要将 CSS 光标更改为 "pointer"在 contenteditable <div> 中 <span> 上的鼠标输入