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

}）;

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

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

我该怎么做？

由于

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

试试这个：

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

Answer 3

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

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

在第二次点击JQUERY时关闭Accordion

3 个答案: