手风琴关闭第二次点击JQUERY

Question

我已经使JQUERY Accordions正常工作。

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; 
    }); 

}）;

我想要的是当用户点击一个手风琴打开它，然后再次点击它，它会关闭。

So 1st click = open，2 click = close。

我该怎么办？

感谢

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()，切换slideUpslideDown之间

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

ŧ RY这样的：

$('#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