目的：

为了实现响应导航，当屏幕宽度大于700px时，效果如下：

当屏幕宽度小于700px时，导航变成一个小按钮，点击后会慢慢下拉一个菜单：

思考：

1.为了以后绑定菜单上的事件，不在DOM中添加冗余节点，大屏的导航和小屏的下拉导航必须是一个。

所以我选择了绝对定位导航。

2.将显示默认导航列表。当屏幕宽度小于700px时，隐藏，并设置位置。当屏幕宽度大于700px时，会出现。或者，默认导航列表是隐藏的，当屏幕宽度大于700px时显示在右侧，小于时隐藏。

问题：

一开始我选择默认他出现，然后出现了问题——。只要按下按钮，导航列表就不会在屏幕放大后再次出现。

代码如下：

div class=' nav-box ' ul class=' nav ' lia href=' JavaScript : void(0)；'class=' to home active ' home/a/Li lia href=' JavaScript : void(0)；class=' ToPort ' portfolio/a/Li lia href=' JavaScript : void(0)；'class=' to Cont ' contact/a/Li/ul a href=' JavaScript : void(0)；'class='nav-btn './a/div。导航框{相对位置：}.nav-BTN { display : none；color: # DE6B73向右浮动：线高： 20px；margin : 35px 0；}.nav { display:块；border-top:无；绝对位置：right : 0；}@media(最大宽度：700px){。nav-BTN { display : inline-block；}}@media(max-width:700px){。nav { display:无；top: 80px背景色-color : # F79c 9c；border-top: 1px固体# FFF；线高： 60px；} }window.onload=function(){ $('。nav-BTN’)。单击(function(){ $(')。nav ')。滑动切换(500)；});}所以我觉得自己的思维有问题，就改成了他默认隐藏的方式。结果是一样的，只要按下按钮，他就再也不会出现了。于是我开始怀疑jQuery。

解决方法：

然后我在F12中发现，我按下按钮后，他会出现这样的风格：

原来这一切都是slideToggle造成的。他通过设置元素的内嵌样式来隐藏元素。这种方法设置的样式优先级是三种方法中最高的，所以CSS中的块设置根本没有用。

要解决这个问题，可以使用js，也可以使用优先级更高的方法：很重要。

如果你选择使用！重要的是，您需要将导航列表设置为默认隐藏，否则它将永远不会被隐藏。

最终的CSS代码如下：nav { display:无；绝对位置：right : 10%；top: 80px背景色-color : # F79c 9c；border-top: 1px固体# FFF；线高： 60px；}.nav-BTN { display : none；color: # DE6B73向右浮动：线高： 20px；margin : 35px 0；}@media(最大宽度：700px){。nav-BTN { display : inline-block；}}@media(最小宽度：700px){。nav { display: block！重要；border-top:无；top: 15pxright : 0；}}摘要：

在没有真正理解框架原理的情况下使用框架是非常危险的。

之后，我尝试了一个jQuery。方法，该方法还以内联方式更改了元素的样式。

似乎我们需要研究一个jQuery是如何工作的，这样我们在应用它时就可以理解它的行为。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。