手风琴与Jquery有问题

Question

我的手风琴工作正常，但我尝试点击已经打开的标签并且它没有关闭，我也希望我的手风琴关闭，因为一个标签打开，其他标签关​​闭。

以下是代码：

    $(function(){
  var heading = $('h1');

  heading.on('click', function(event){
    var target = $(event.target);
    $('div.content').addClass('hidden');
  target.next('div.content').removeClass('hidden');

   })
});

Answer 1

确保您的HTML代码如下所示

<h1>Title 1</h1>
<div class="content hidden">
    Title 1 Content
</div>
<h1>Title 2</h1>
<div class="content hidden">
    Title 2 Content
</div>
<h1>Title 3</h1>
<div class="content hidden">
    Title 3 Content
</div>

添加此jquery

$(function(){
    // hiding rest of the content block (optional), its already hidden in html code by css class
    $('div.content').addClass('hidden');  
    $('h1').on('click', function(){
        if($(this).next('div.content').hasClass('hidden')){
            $(this).next('div.content').removeClass('hidden').addClass('visible');
        }else{
            $(this).next('div.content').removeClass('visible').addClass('hidden');
        }
    });
});