Question

这是我关于Stack Overflow的第一个问题。需要一些标签帮助。现在，当我点击其中一个h3标签时，我打开标签内容，但我想在h3下一次点击它关闭它。

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

这是我的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');
    })

Answer 1

您可以使用toggle。

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

＆＃13;

$(".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(); 
  
})

＆＃13;

<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>

＆＃13;

Answer 2

使用 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

上查看

jquery [tabs]打开和关闭

2 个答案: