JS寻找当前元素，当前上一个元素，下一个元素

admin

JS寻找当前元素，当前上一个元素，下一个元素，并改变其展示方式

css：

1. <style>
   
2.         .category_childs_none {                /* 初始化此元素包括的内容为隐藏的 */
   
3.         display: none;
   
4.         }
   
5. </style>

复制代码

html：

1. <tbody id="category_body">
   
2.         <tr>
   
3.                 <td>
   
4.                         <a href="#" class="toggle_collapse">        <!-- 给当前a元素定义一个class .toggle_collapse -->
   
5.                                 <i class="fa fa-plus"></i>        <!-- 初始化为展示‘+’号 -->
   
6.                         </a>
   
7.                 </td>
   
8.                 <td>
   
9.                         <input type="text" class="" name="" value="">
   
10.                 </td>
    
11.                 <td>
    
12.                         <input type="text" disabled class="" value="">
    
13.                 </td>
    
14.                 <td>
    
15.                 </td>
    
16.                 <td>
    
17.                         <a href="#"><i class="fa fa-pencil"></i> 编辑</a>
    
18.                         <a href="#"><i class="fa fa-remove"></i> 删除</a>
    
19.                 </td>
    
20.         </tr>
    
21. </tbody>
    
22. <tbody class="category_childs_none">
    
23.         <tr>
    
24.                 <td>
    
25.                 </td>
    
26.                 <td>
    
27.                         <input type="text" class="" name="" value="">
    
28.                 </td>
    
29.                 <td>
    
30.                         <input type="text" disabled class="" value="">
    
31.                 </td>
    
32.                 <td>
    
33.                 </td>
    
34.                 <td>
    
35.                         <a href="#"><i class="fa fa-pencil"></i> 编辑</a>
    
36.                         <a href="#"><i class="fa fa-remove"></i> 删除</a>
    
37.                 </td>
    
38.         </tr>
    
39. </tbody>

复制代码

js：

1. <script>
   
2.         require(['jquery', 'util'], function($, u){
   
3.                 $('.toggle_collapse').click(function(){
   
4.                         if ($('i', this).hasClass('fa-plus')) {
   
5.                                 $('i', this).removeClass('fa-plus').addClass('fa-minus');
   
6.                                 $(this).parent().parent().parent().next().show();
   
7. 
   
8.                         } else if ($('i', this).hasClass('fa-minus')) {
   
9.                                 $('i', this).removeClass('fa-minus').addClass('fa-plus');
   
10.                                 $(this).parent().parent().parent().next().hide();
    
11.                         }
    
12.                 });
    
13.         })
    
14. </script>

复制代码

1. $('.toggle_collapse').click(function(){                //当a元素toggle_collapse执行点击事件的时候

复制代码

1. if ($('i', this).hasClass('fa-plus')) {        //如果往前元素内的‘i’元素 有class名为fa-plus的

复制代码

1. $('i', this).removeClass('fa-plus').addClass('fa-minus');        //就将当前元素内的‘i’内的class为fa-plus的移除掉，并增加class名fa-minus

复制代码

1. $(this).parent().parent().parent().next().show();        //找当前a元素的上级的上级的上级的 评级的下一个元素 展示出来

复制代码

1. $(this).parent().parent().parent().next().hide();        //找当前a元素的上级的上级的上级的 平级的下一个元素 隐藏起来

复制代码