jsFiddle

Question

是否可以在加载页面或发生事件时展开所有组件？谢谢！

Answer 1

只需使用此

即可

$('#accordion .ui-accordion-content').show();

Answer 2

不，如果你指的是手风琴作为你的标签陈述。来自jQuery。

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

http://docs.jquery.com/UI/API/1.8/Accordion

Answer 3

我会推荐这个插件Multi-open Accordion

// this will make the second tab by default opened (index starts from 0)
$('#multiAccordion').multiAccordion({active: 1 }); 

// [ OR ]
// supports multiple tabs to be opened by default
$('#multiAccordion').multiAccordion({active: [1, 2, 3] }); 

// show all tabs
$('#multiAccordion').multiAccordion({active: 'all' });

// hide all tabs
$('#multiAccordion').multiAccordion({active: 'none' });

// you can set the options as any jQuery UI plugin using option method
$('#multiAccordion').multiAccordion('option', 'active', 'all');

Answer 4

我喜欢这个切换框的实现：

http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

<div class="toggle-box">
  <div class="toggle-title">Toggle 1</div>
  <div class="toggle-content">
    <p>text1.</p>
  </div>
  <div class="toggle-title">Toggle 2</div>
  <div class="toggle-content">
    <p>text2.</p>
  </div>
  <div class="toggle-title">Toggle 3</div>
  <div class="toggle-content">
    <p>text3</p>
  </div>
</div>

在

找到了这个

I can't make a jQuery UI accordion tab change colors when used (like a:visited), can I?

Answer 5

您可以在jQuery提供的document.ready事件中执行此操作，如下所示：

CSS：

.myClassToBeHidden { display: none; }

jQuery的：

$(function() {
  $(".myClassToBeHidden").slideDown();
});

如果你的意思是来自jQuery UI的手风琴控制，那么...你不应该使用手风琴，扩展所有不是它的用途，他们建议反对这，因为它会导致其他问题。

Answer 6

为了让它不引人注目，只有当访问者有javascript我才能隐藏

CSS：

#divToBeHidden { display: block; }

在<head>：

$('#divToBeHidden').hide();

<body>的底部：

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});

Answer 7

我知道我正在回答一个2岁的问题，但没有一个变通方法或替代手风琴插件适用于我，所以我提出了一个破坏性的简单解决方法：只需点击“扩展”即可销毁手风琴所有“链接，并点击”全部折叠“链接重新初始化它。像这样：

<script type="text/javascript">
function accordionInit() {
    $("#accordion").accordion();
}

function accordionDestroy() {
    $("#accordion").accordion("destroy");
}

$(function() {
    accordionInit();
});
</script>

展开全部并折叠所有链接将如下所示：

<a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>

Answer 8

大声笑，这里有很多答案，但最简单的解决方案似乎并非如此。答案是“是”和“否”。您不能使用“传统”命令，但是您可以使用“类”并自己编写JS，即SUPER SIMPLE!

使用jQueryUI的类和一些JS制作你自己的Accordion，你就可以了。它非常简单，并使用您的jQueryUI ThemeRoller进行维护。如果您想要“官方accorrdion小部件”提供的“x-tra”选项，您可以使用更多的CSS或JS来管理所有这些选项。真的不那么难。下面是我将发布的代码的工作示例的链接。我只是简单地将他们的类复制到我的HTML布局中。 HTML仍然像任何其他jQueryUI手风琴一样布局，除了我们手动应用类而不是让jQuery这样做。看下面看看我的意思。

<子> Or of course you can get this xtra, jquery-theme ready plugin

jsFiddle

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

Answer 9

问这个问题已经9年了。但是我发现以下解决方案默认情况下打开所有手风琴div。在这里，我使用了 slideDown（）方法来显示所有div内容。

$(function () {
          $("#accordion").accordion({
                header: "> div > h3",
                collapsible: true,
               heightStyle: "content"
           });
          jQuery('#accordion h3.ui-accordion-header').next().slideDown();
 });

Answer 10

我知道这太迟了但我今天找到了解决方案。只需使用

即可

function expandAll() {
$('#accordion h3').removeClass('ui-state-default')
    .addClass('ui-state-active')
    .removeClass('ui-corner-all')
    .addClass('ui-corner-top')
    .attr('aria-expanded', 'true')
    .attr('aria-selected', 'true')
    .attr('tabIndex', 0)
.find('span.ui-icon')
    .removeClass('ui-icon-triangle-1-e')
    .addClass('ui-icon-triangle-1-s')
.closest('h3').next('div')
    .show();}

link of full article

Answer 11

MultiAccordion jQuery UI插件对我很有用： https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

在jQuery UI引用之后添加插件引用后，您只需进行2个简单的更改：

$（“＃accordion_div”）。多手风琴（“选项”，“有效”， [0,1] ）;

jQuery Accordion扩展了所有div

11 个答案:

jsFiddle

HTML

JavaScript