jquery实现点击一个按钮显示当前div,并且关闭兄弟节点的所有div
程序员文章站
2022-05-05 20:42:05
...
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
<div class="Day">
<input type="button" id="button" value="BMW 1系" />
<div class="select">
<h2>BMW 1系两厢运动轿车</h2><br />
<h3>车型售价 ￥ 231,800起</h3>
</div>
</div>
<div class="Day">
<input type="button" id="button" value="BMW 2系" />
<div class="select">
<h2>BMW 1系两厢运动轿车</h2><br />
<h3>车型售价 ￥ 231,800起</h3>
</div>
</body>
</html>
上述代码：
- Day和Day成为兄弟节点
- Day和select成为父子节点
jQuery遍历参考网站：http://www.w3school.com.cn/jquery/jquery_traversing_siblings.asp
jQuery代码：
<script type="text/javascript">
/*点击打开下拉框 ,并且点击另一个时 this收起*/
$(document).ready(function() {
/*默认隐藏*/
$(".select").hide();
/*点击按钮后*/
$('.bos').click(function() {
$(this).children('.select').slideToggle().parents('.bos').siblings('.bos').children('.select').hide();
})
});
希望能解决您的疑惑！
上一篇： C语言学习笔记---数组
下一篇： 使用URL下载网络资源