响应式菜单和jQuery的slideToggle出现问题 [英] Trouble with a responsive menu and jQuery's slideToggle
问题描述
我正在构建一个响应式导航菜单，并且在调用jQuery的slideToggle()时无法使导航项变得可见.菜单项(.nav_item)会适当折叠，然后在视口小于640px时变为不可见，第一个菜单项(#nav_menu)菜单"将成为唯一可见的项.单击后，我希望按钮重新出现并向下滑动到菜单按钮下方.但是，当我单击时，什么也没有发生，并且菜单项保持不可见.如果我从菜单项中取出display: none !important;，它们将成功切换(但始终可见).有人知道出什么事了吗?谢谢.
I'm building a responsive navigation menu and I'm having trouble getting the nav items to become visible upon calling jQuery's slideToggle(). The menu items (.nav_item) collapse appropriately, and then become invisible when the viewport is <640px, the first menu item (#nav_menu) "Menu" then becomes the only item visible. Upon clicking, I'd like the buttons to reappear and slide down below the menu button. When I click, however, nothing happens and the menu items remain invisible. If I take out display: none !important; from the menu items, they successfully toggle (but are visible the whole time). Does anyone know what's going wrong? Thanks.
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>
推荐答案
它基本上只是一个特殊性问题.
即使jQuery的.slideToggle()方法添加了内联样式，但是当屏幕尺寸小于640px时，它仍然没有效果，因为您使用的是!important.
Even though jQuery's .slideToggle() method adds inline styling, it still wasn't having an effect when the screen size was less than 640px because you were using !important.
@media only screen and (max-width: 640px)
.nav_item {
display: none !important;
}
}
更具体地说，您的媒体查询中的上述样式覆盖了jQuery添加的样式:
More specifically, the above styling in your media query was overwriting the styling added by jQuery:
<li class="nav_item" style="display: list-item;"><a href="#">Home</a></li>
要解决此问题，请删除样式表中的所有!important实例，并在考虑到特殊性问题的情况下重新构造样式.如果我是你，我会避免使用这样的id.简单的类就足够了，并且可以避免将来发生此类问题.但是，如果不更改 任何HTML，这将起作用:
To solve this, remove all instances of !important in your stylesheet and re-structure the styling with the specificity issues in mind. If I were you, I would avoid using id's like this. Simple classes would suffice and help avoid future issues like this. Without changing any HTML, though, this would work:
#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事件时删除jQuery样式.屏幕尺寸比640px宽.
Since you're already using jQuery, use the resize event to remove the jQuery styling when the screen size wider than 640px.
$(window).on("resize", function () {
if ($(window).width() > 640) {
$('.nav_item').css('display','');
}
}).resize();
这应该照顾好一切.看看这个工作示例.
This should take care of everything. Take a look at this working example.
这篇关于响应式菜单和jQuery的slideToggle出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
