工作中接触到一专题的结构比较特殊，代码如下：
| 代码如下 | 复制代码 |
|
<div class="test"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="part"> <div>1-1</div> <div style="display:none;">2</div> <div style="display:none;">3</div> <div style="display:none;">4</div> <div style="display:none;">5</div> </div> </div> <div class="test"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="part"> <div>2-1</div> <div style="display:none;">2-2</div> <div style="display:none;">2-3</div> <div style="display:none;">2-4</div> <div style="display:none;">2-5</div> </div> </div> |
|
要求点击每个.list下的li标签，控制该.list下同级的.part的div层的显示，同时不能影响页面其它的.list相关的层的显示！
刚开始觉得处理这个没什么技术难度，但动手的的时候还是遇到了点小问题，记录下实现代码
| 代码如下 | 复制代码 |
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{margin: 0;padding: 0;} .test{padding:20px;} .test ul{overflow: hidden;} .test ul li{width:50px;height: 30px;margin-right: 10px; border-bottom: 1px red solid;float: left; cursor: pointer;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="test"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="part"> <div>1-1</div> <div style="display:none;">2</div> <div style="display:none;">3</div> <div style="display:none;">4</div> <div style="display:none;">5</div> </div> </div> <div class="test"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="part"> <div>2-1</div> <div style="display:none;">2-2</div> <div style="display:none;">2-3</div> <div style="display:none;">2-4</div> <div style="display:none;">2-5</div> </div> </div> <script> var index, parent; $(".list >li").each(function(i, el) {/* 多个.list下的li索引会累加，即i取值为：0<=i<=9 */ $(this).click(function(event) { parent=$(this).parents(".test"); index=$(".list >li",parent).index($(this));//获得点击项在对应父元素.test .part 下的索引，而不是取each()中的i值 // console.log(index); parent.children('.part').find('div').eq(index).show().siblings().hide(); }); }); </script> </body> </html> |
|
时间： 2024-08-02 12:08:45