JQUERY相同HTML结构如何点击显示对应DIV
本文介绍了JQUERY相同HTML结构如何点击显示对应DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div class="box">
<div class="list">分类1</div>
<div class="list">分类2</div>
</div>
<div class="box">
<div class="list">分类3</div>
<div class="list">分类4</div>
</div>
<div class="box">
<div class="list">分类5</div>
</div>
<!--...省略n个box...-->
<div class="content">
<div class="cate">分类1-1</div>
<div class="cate">分类2-1</div>
</div>
<div class="content">
<div class="cate">分类3-1</div>
<div class="cate">分类4-1</div>
</div>
<div class="content">
<div class="cate">分类5-1</div>
</div>
<!--...省略n个content...-->
代码如上,box和content及子级数量对应,content默认隐藏,点击分类2显示对应content里子级里分类2-1,点击其它隐藏上一个显示的对应DIV,其它操作同理。请问,不同级如何让他点击显示并隐藏上一个?
为了更好的理解,附加GIF图供参考:
解决方案
<div class="box">
<div class="list">分类1</div>
<div class="list">分类2</div>
<div class="list">分类3</div>
<div class="list">分类4</div>
<div class="list">分类5</div>
</div>
<div class="content">
<div class="cate">
<div>分类1-1</div>
<div>分类1-2</div>
<div>分类1-3</div>
<div>分类1-4</div>
<div>分类1-5</div>
</div>
<div class="cate">
<div>分类2-1</div>
<div>分类2-2</div>
<div>分类2-3</div>
<div>分类2-4</div>
<div>分类2-5</div>
</div>
...
<div class="cate">
<div>分类5-1</div>
<div>分类5-2</div>
<div>分类5-3</div>
<div>分类5-4</div>
<div>分类5-5</div>
</div>
</div>
$('.list').on('click',function(){
var _index=$(this).index();
$(this).show().siblings().hide();
$(".content .cate").eq(_index).show().siblings().hide();
})
这篇关于JQUERY相同HTML结构如何点击显示对应DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文