調整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

先生，您在這里：

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

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

請注意，您需要添加一個元素以顯示每個面板的狀態（在此示例中，類為'accordion-status'的DIV ）

完整的小提琴： http : //jsfiddle.net/67w3pa89/