Javascript 调整jQuery accordion-打开所有选项卡

我用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>

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

$(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');

    });
});

Javascript:

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

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

$(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');

    });
});

先生，给您：

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

先生，给您：

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

---

要同时打开所有的手风琴面板，只需拆下这条线，因为它会折叠其他面板

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

要显示每个面板的打开/关闭状态，可以添加在显示或隐藏面板后运行的回调函数，并使用jQuery的

.is（）

请注意，您需要添加一个元素来显示每个面板的状态（在本例中，使用类

'accordion-status'

的

DIV

）

---

全小提琴：

允许所有手风琴面板同时打开，只需移除这条线，因为它会折叠其他面板

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

要显示每个面板的打开/关闭状态，可以添加在显示或隐藏面板后运行的回调函数，并使用jQuery的

.is（）

请注意，您需要添加一个元素来显示每个面板的状态（在本例中，使用类

'accordion-status'

的

DIV

）

---

全小提琴：

要允许打开所有的手风琴，只需注释掉

隐藏其他面板

代码。在这里尝试：您没有包含jQuery，一旦包含，它就会起作用。当您说“有文本显示打开和关闭，取决于它们是否打开/关闭。”是针对所有项目的吗？要允许打开所有手风琴，只需注释掉

隐藏其他面板的
代码。在此处尝试：您没有包含jQuery，一旦包含jQuery，它就会工作。当您说“根据打开/关闭的情况显示打开和关闭的文本”时，是针对所有项目的吗？啊，对不起。我可能需要更好地解释一下。只有第一个手风琴在页面加载时才打开。之后，您可以打开/关闭所有手风琴。我不需要
打开所有
或
关闭所有
链接。如果手风琴打开了，文本应该说“关闭”，反之亦然。啊，对不起。我可能需要更好地解释一下。页面加载时，只有第一个手风琴打开。之后，您可以打开/关闭所有手风琴。我不需要
打开所有
或
关闭所有
链接。如果手风琴打开，文本应显示“关闭”，反之亦然。