jQuery -用于选择和取消选择按钮的slideToggle
jQuery -用于选择和取消选择按钮的slideToggle
提问于 2013-07-01 22:55:24
我这里有一个jsfiddle - http://jsfiddle.net/eYV4n/
非常简单的导航和一个隐藏的div块。
当您单击导航中的第二个链接时，div块将随slideToggle向下滑动。
当div块向下滑动时，我希望单击的按钮被选中。
当它被点击时，我可以通过改变背景颜色来做到这一点。
当div块再次滑动时，是否可以取消选择链接(将其颜色改回原来的颜色)？
jquery.hover()处理程序悬停和悬停。用slideToggle可以做同样的事情吗？
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li><a href="">One</a></li>
<li><a href="" id="btn">Two ↓</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-01 22:58:17
一个更好的解决方案是切换一个类，然后改变背景。你最好不要用Javascript设置元素的样式，你应该使用CSS。不过，添加/删除类是很好的。从长远来看，这将使代码更容易维护，而且它也更具语义性，因为您使用的是类，而不是内联样式。
试试这个：
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})然后在你的CSS中。
.active { background: red; }编辑：Jsfiddle here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17407476
复制相关文章
相似问题
腾讯云开发者
