CSS3 media queries + jQuery实现响应式导航

        display: inline-block;   
    }   
}   
@media(max-width:700px){   
  .nav {   
    display: none;   
    top: 80px;   
    background-color: #F79C9C;   
    border-top: 1px solid #FFF;   
    line-height: 60px;   
  }      
}   
window.onload=function(){   
    $(".nav-btn").click(function(){   
        $(".nav").slideToggle(500);   
    });   
}  

于是我以为是我的思路出现了问题，我换成了默认他隐藏的方式。结果还是一样，只要按过了按钮，他就再也不会出现了。于是我开始怀疑jQuery。

解决：

然后我在F12中发现,我按过按钮之后，他会出现这样一个样式：

原来这一切都是slideToggle搞的鬼，他是通过设置元素的内联样式让元素隐藏，这种方法设置的样式的优先级是三种方式中最高的，所以在CSS中设置的block根本没有用了。

要解决这个问题，可以使用js，也可以用一个优先级更高的方式：!important.

如果选择用!important的话，就需要设置导航列表是默认隐藏的，不然他永远都无法隐藏了。

最后的CSS代码如下：

CSS Code复制内容到剪贴板

.nav {   
    display: none;   
    position: absolute;   
    rightright: 10%;   
    top: 80px;   
    background-color: #F79C9C;   
    border-top: 1px solid #FFF;   
    line-height: 60px;   
}   
.nav-btn {   
    display: none;   
    color: #DE6B73;   
    float: rightright;   
    line-height: 20px;   
    margin: 35px 0;   
}   
@media(max-width:700px){   
    .nav-btn{   
        display: inline-block;   
    }   
}   
@media(min-width:700px){   
    .nav {   
        display: block !important;