调整jQuery手风琴 - 打开所有标签

Question

我用jQuery开发了一个非常基本的手风琴。

我希望允许所有手风琴随时开启。

我还想要文字说open & close取决于它们是否打开/关闭。

HTML：

<div id="accordion"> 
    <h4 class="accordion-toggle">Accordion 1</h4> 
    <div class="accordion-content default"> 
     <p>Cras malesuada ultrices augue molestie risus.</p> 
    </div> 
    <h4 class="accordion-toggle">Accordion 2</h4> 
    <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
    </div> 
    <h4 class="accordion-toggle">Accordion 3</h4> 
    <div class="accordion-content"> 
     <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
    </div> 
</div> 

CSS：

.accordion-toggle {cursor: pointer; margin: 0;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;} 

的Javascript：

$(document).ready(function($) { 
    $('#accordion').find('.accordion-toggle').click(function(){ 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
}); 

http://jsfiddle.net/zbjv3cak/

Answer 1

为了让所有的手风琴板来一次打开，只需删除此行，因为它折叠了其他面板。

// Hide the other panels 
$(".accordion-content").not($(this).next()).slideUp('fast'); 

要显示每个面板的开/关状态，你可以使用jQuery的.is()

$(this).next().slideToggle('fast', function(){ 
    var status = $(this).is(':hidden') ? 'close' : 'open'; 
    $(this).next('.accordion-status').html(status); 
}); 

添加运行显示或隐藏在面板之后的回调函数，并测试其新的可见性请注意，您需要添加一个元素来显示每个面板此状态（在这个例子中，DIV与'accordion-status'类）

全小提琴：http://jsfiddle.net/67w3pa89/

Answer 2

在这里，你是先生：

<a href="#" class="open">Open All</a> 
    <a href="#" class="close">Close All</a> 
    <div id="status"></div> 
    <div id="accordion"> 
     <h4 class="accordion-toggle">Accordion 1</h4> 
     <div class="accordion-content default"> 
      <p>Cras malesuada ultrices augue molestie risus.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 2</h4> 
     <div class="accordion-content"> 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 3</h4> 
     <div class="accordion-content"> 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
     </div> 
    </div> 

和JS：

$(document).ready(function($) { 
     $('.accordion-toggle').click(function(){ 

      //Expand or collapse this panel 
      $(this).next().slideToggle('fast'); 

      //Hide the other panels 
      $(".accordion-content").not($(this).next()).slideUp('fast'); 
     }); 

     $(".open").click(function(e){ 
     e.preventDefault(); 
     $('.accordion-toggle').next().slideDown('fast'); 
     $("#status").text("Opened"); 
     }); 

     $(".close").click(function(e){ 
     e.preventDefault(); 
     $('.accordion-toggle').next().slideUp('fast'); 
     $("#status").text("Closed"); 
     }); 
    }); 

http://jsfiddle.net/zbjv3cak/1/