2015-02-10 62 views
0

我用jQuery開發了一個非常基本的手風琴。調整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/

+1

爲了讓所有的手風琴都可以打開,只需註釋'隱藏其他面板「代碼即可。 – APAD1 2015-02-10 22:31:57

+0

嘗試在這裏:http://jsfiddle.net/zbjv3cak/2/ – michaelmcgurk 2015-02-10 22:34:07

+0

你沒有包括jQuery,它會工作,一旦你做。 – APAD1 2015-02-10 22:34:38

回答

2

爲了讓所有的手風琴板來一次打開,只需刪除此行,因爲它摺疊了其他面板。

// 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/

+0

絕對完美! – michaelmcgurk 2015-02-10 22:37:55

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/

+0

Aaaah對不起。我可能需要更好地解釋它。只有第一個手風琴應該在頁面加載時打開。之後,您可以打開/關閉所有手風琴。我不需要「全部打開」或「全部關閉」鏈接。如果手風琴是開放式的,文本應該說是'close',反之亦然。 – michaelmcgurk 2015-02-10 22:37:19

+0

知道了給我5 – ChrisJ 2015-02-10 22:39:16