主题解决方案！

Question

我正在为我的应用程序使用jQuery accordion插件。有没有办法同时打开部分（页面加载后），以便同时显示所有页面的内容。如果不可能，请给我一个链接，我可以实现类似的功能。谢谢。我是jQuery的新手。

Answer 1

您应该阅读this page中的NOTES。在这里，我直接从该页面复制并粘贴它：

注意：如果您想一次打开多个部分，请不要使用手风琴

手风琴不允许同时打开多个内容面板，这需要花费很多精力。如果您正在寻找允许打开多个内容面板的小部件，请不要使用它。通常它可以用几行jQuery编写，如下所示：

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

或动画：

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

Answer 2

主题解决方案！

_没有插件这真的很简单。使用与普通手风琴相同的标记。将类从普通手风琴复制到标记。添加“小”JavaScript魔法和中提琴！

jsFiddle Example (with Theme Switcher!)

HTML

<div id="StickyNotes">
    <div class="container">
        <div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 1
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>
            </div>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 2
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                </p>
            </div>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 3
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                </p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 4
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                    mauris vel est.
                </p>
                <p>
                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos himenaeos.
                </p>
            </div>
        </div>
    </div>
</div>

JavaScript

$(function() {
    $("#accordion > h3").on("click", function(e) {
        $(this).next().slideToggle(function(e) {
            if ($(this).is(":visible")) {
                $(this).addClass("ui-accordion-content-active")
                .prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active")
                .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
            }
            else {
                $(this).removeClass("ui-accordion-content-active")
                .prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active")
                .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
            }
        });
    })
    .hover(function(e) { $(this).toggleClass("ui-state-hover"); });
})

当然，如果你仍然想要一个jQueryUI主题兼容（_{左右他们声称，个人未经测试}）插件添加到你的Libs，你可以找到一个here！

Answer 3

jQuery使得在没有插件的情况下制作自己的手风琴非常容易。例如，这个HTML：

<div class="accordion_toggler">
    Section One
</div>

<div class="accordion_content">
    ..... content here ......
</div>

和这个jQuery：

$('.accordion_toggler').click(function() {
    $(this).next('.accordion_content').slideToggle();
});

每当您点击accordion_toggler时，以下accordion_content都会切换（在这种情况下向上或向下滑动）。要从隐藏的所有内容开始，但允许多个同时打开，请使用此CSS：

.accordion_content { display: none }

同时打开所有手风琴窗

3 个答案:

主题解决方案！

HTML

JavaScript