在第二次单击 JQUERY 时关闭手风琴

Question

我制作的 JQUERY 手风琴效果很好。

HTML：

<div id="accordion">

<div class="title"><span>Accordian 1</span></div>
<div class="hide">

  <p>hidden content</p>

</div>

<div class="title"><span>Accordian 2</span></div>
<div class="hide">

  <p>hidden content</p>

</div>


<div class="title"><span>Accordian 3</span></div>
<div class="hide">

   <p>hidden content</p>

</div>

<div class="title"><span>Close all the accordions</span></div>

</div>

JQUERY

$(document).ready(function() {

    $('#accordion .hide').hide();
   $('#accordion .title span').click(function(){
           $('#accordion .hide').slideUp();
           $(this).parent().next().slideDown();

           return false;
   });

});

我想要的是当用户单击手风琴将其打开，然后再次单击它将关闭时。

所以第一次点击 = 打开，第二次点击 = 关闭。

我该怎么办？

谢谢

Answer 1

HTML：

<div id="accordion">
<div class="title"><span>Accordian 1</span></div>
<div class="hide">
  <p>hidden content</p>
</div>
<div class="title"><span>Accordian 2</span></div>
<div class="hide">
  <p>hidden content</p>
</div>
<div class="title"><span>Accordian 3</span></div>
<div class="hide">
   <p>hidden content</p>
</div>
<div class="close"><span>Close all the accordions</span></div>
</div>

使用slideToggle()，在slideUp和slideDown之间切换

$(document).ready(function() {    
   $('#accordion .hide').hide();
   $('#accordion .title span').click(function(){
           $(this).parent().next()
                  .slideToggle()
                  .siblings('.hide').slideUp();
           return false;
   });
    $('.close').click(function(){
        $('#accordion .hide').slideUp();
    });
});

Fiddle Demo

Answer 2

您可以使用以下解决方案在 jQuery 中使手风琴在第二次单击时关闭：

$("#accordion").accordion({
        heightStyle: "content",
        autoHeight: false,
        clearStyle: true,
        collapsible: true, //this makes the selected tab close on second click
});

Answer 3

试试这个：

$('#accordion .hide').hide();
$('#accordion .title span').click(function () {
    $(this).parent().next().slideToggle().siblings('.hide').slideUp();
});

$('#accordion .title span:last').click(function () {
     $('#accordion .hide').slideUp();
});

Fiddle Demo