CSS3 media queries + jQuery完成回应式导航栏

目地：

完成1个回应式导航栏，当显示屏宽度超过700px时，实际效果以下：

当显示屏宽度小于700px时，导航栏变为1个小按钮，点一下以后有1个菜单渐渐地拉下来：

思路：

1.以便以后在菜单上关联恶性事件，而且不向DOM中加上过剩的连接点，在大显示屏中出現的导航栏和小显示屏中的往下拉导航栏务必是1个。

   因此我挑选了将导航栏肯定精准定位。

2.默认设置导航栏目录是出現的，当显示屏宽度小于700px时它掩藏，而且设定position，当显示屏宽度超过700px时，它出現。或，默认设置导航栏目录是掩藏的，当显示屏宽度超过700px时它出現在右边，小于时掩藏。

难题：

刚开始的情况下，我挑选了默认设置他出現，随后出現了1个难题——要是按过了按钮，显示屏变大以后导航栏目录就不再会出現了。

编码以下：

因而我认为是我的思路出現了难题，我换为了默认设置他掩藏的方法。結果還是1样，要是按过了按钮，他就不再会出現了。因而我刚开始怀疑jQuery。

处理：

随后我在F12中发现,我按过按钮以后，他会出現这样1个款式：

原先这1切全是slideToggle搞的鬼，他是根据设定元素的内联款式让元素掩藏，这类方式设定的款式的优先选择级是3种方法中最高的，因此在CSS中设定的block压根沒有用了。

要处理这个难题，可使用js，还可以用1个优先选择级更高的方法：!important.

假如挑选用!important的话，就必须设定导航栏目录是默认设置掩藏的，要不然他始终都没法掩藏了。

最终的CSS编码以下：

总结：

不真实了解1个架构的基本原理就去用，是很风险的。

我以后试了1个jQuery的.css()方式，他一样是用内联的方法更改的元素的款式。

看模样必须科学研究1个jQuery是怎样工作中的了，这样运用的情况下才可以了解他的个人行为。

以上所述是网编给大伙儿详细介绍的CSS3 media queries + jQuery完成回应式导航栏，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！