jquery [选项卡]打开和关闭

这是我的第一个关于堆栈溢出的问题。需要一些标签的帮助。现在，当我点击h3标签中的一个时，我打开标签内容，但是我希望在下一次点击h3时关闭它。jquery [选项卡]打开和关闭

道歉为我的英语不好的技能，希望你们都明白我的意思。

这是我的html：

   <div class="sub-aside"> 
       <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
       <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
        <li><a href="#">Home Goods</a></li> 
        <li><a href="#">Cooking</a></li> 
       </ul> 
      </div> 
      <div class="sub-aside"> 
       <h3 class="sub-category" data-tab="tab-2">life events</h3> 
       <ul class="drop-content sub-content" id="tab-2"> 
        <li><a href="#">Anniversary</a></li> 
        <li><a href="#">Back to school</a></li> 
       </ul> 
      </div>

和我的jQuery代码：

$(".sub-category").on('click', function() { 
     var tab_id = $(this).attr('data-tab'); 

     $('.sub-category').removeClass('content-active'); 
     $('.sub-content').removeClass('content-active'); 

     $(this).addClass('content-active'); 
     $("#"+tab_id).addClass('content-active'); 

     $('.sub-category').toggleClass('content-active'); 
    })

来源

2016-09-27 grimlok

您可以使用toggle。

$(".sub-category").on('click', function() { 
$(this).next('ul').toggle();  
})

$(".sub-category").on('click', function() { 
 
//Toggle particular element 
 
$(this).next('ul').toggle();  
 
//Hide all the elements not the clicked one 
 
$(".sub-category").next('ul').not($(this).next('ul')).hide(); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-aside"> 
 
       <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
 
       <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
 
        <li><a href="#">Home Goods</a></li> 
 
        <li><a href="#">Cooking</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="sub-aside"> 
 
       <h3 class="sub-category" data-tab="tab-2">life events</h3> 
 
       <ul class="drop-content sub-content" id="tab-2"> 
 
        <li><a href="#">Anniversary</a></li> 
 
        <li><a href="#">Back to school</a></li> 
 
       </ul> 
 
      </div>

来源

2016-09-27 11:22:52

会这么好心，并落实到我的js呢？ – grimlok

您可以使用切换，现成的jQuery事件。 –

好的，但我想得到的效果：打开一个选项卡，并关闭另一个打开的选项卡。这个怎么做？ – grimlok

使用的slideToggle更好的效果

jQuery的

$(document).ready(function() { 
    $(".sub-category").on('click', function() { 
    $(this).next('ul').slideToggle();  
    }) 
});

的Html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sub-aside"> 
      <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
      <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
       <li><a href="#">Home Goods</a></li> 
       <li><a href="#">Cooking</a></li> 
      </ul> 
     </div> 
     <div class="sub-aside"> 
      <h3 class="sub-category" data-tab="tab-2">life events</h3> 
      <ul class="drop-content sub-content" id="tab-2"> 
       <li><a href="#">Anniversary</a></li> 
       <li><a href="#">Back to school</a></li> 
      </ul> 
     </div>

检查它JsFiddle

来源

2016-09-27 11:26:28

jquery [选项卡]打开和关闭

回答

相关问题