我正在构建一个响应式导航菜单，但在调用 jQuery 的 slipToggle() 时无法使导航项变得可见。菜单项(.nav_item)适当折叠，然后在视口(viewport) <640px 时变得不可见，第一个菜单项(#nav_menu)“菜单”然后成为唯一可见的元素。单击后，我希望按钮重新出现并滑到菜单按钮下方。然而，当我单击时，没有任何反应，菜单项仍然不可见。如果我从菜单项中取出 display: none !important;，它们会成功切换(但始终可见)。有谁知道出了什么问题吗？谢谢。
CSS(指南针):
#navUL {
@include background-image(linear-gradient($blue_dark, $blue_light));
text-align: center;
}
#navUL li {
a:link, a:visited {
color: white;
text-decoration: none;
display: block;
height: 40px;
padding: 0 25px 0 25px;
}
a:hover {
@include background-image(linear-gradient($red_dark, $red_light));
}
display: inline-block;
color: white;
line-height: 40px;
font-family: Helvetica;
}
#nav_menu {
display: none !important;
}
@media only screen and (max-width: 640px) {
#nav_menu {
display: inline !important;
}
.nav_item {
display: none !important;
}
#navUL li {
display: inline;
}
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<img src="top_banner.jpg">
</header>
<nav>
<ul id="navUL">
<li id="nav_menu"><a href="#">Menu</a></li>
<li class="nav_item"><a href="#">Home</a></li>
<li class="nav_item"><a href="#">Search</a></li>
<li class="nav_item"><a href="#">Submit</a></li>
<li class="nav_item"><a href="#">News</a></li>
<li class="nav_item"><a href="#">Blog</a></li>
<li class="nav_item"><a href="#">About</a></li>
</ul>
</nav>
<div id="main">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
JS:
<script>
$(document).ready(function(){
$('#nav_menu').on('click', function(e){
e.preventDefault();
$('.nav_item').slideToggle('slow');
});
});
</script>
最佳答案
它基本上只是一个 specificity issue .
尽管 jQuery 的 .slideToggle() 方法添加了内联样式，但当屏幕尺寸小于 640px 时它仍然没有效果，因为您使用的是 !重要。
@media only screen and (max-width: 640px)
.nav_item {
display: none !important;
}
}
更具体地说，媒体查询中的上述样式覆盖了 jQuery 添加的样式:
<li class="nav_item" style="display: list-item;"><a href="#">Home</a></li>
要解决此问题，请删除样式表中的所有 !important 实例，并根据特殊性问题重新构建样式。如果我是你，我会避免像这样使用 id。简单的类就足够了，有助于避免将来出现类似的问题。不过，在不更改任何 HTML 的情况下，这将起作用:
#navUL #nav_menu {
display: none;
}
@media only screen and (max-width: 640px) {
#navUL #nav_menu {
display: inline-block;
}
#navUL .nav_item {
display: none;
}
}
由于您已经在使用 jQuery，因此请使用 resize event当屏幕尺寸宽于 640px 时删除 jQuery 样式。
$(window).on("resize", function () {
if ($(window).width() > 640) {
$('.nav_item').css('display','');
}
}).resize();
这应该可以解决一切问题。看看this working example .
关于jquery - 响应式菜单和 jQuery 的 slipToggle 出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22384461/