6

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

4

12 回答 12

14

只需使用这个

$('#accordion .ui-accordion-content').show();
于 2013-02-06T11:33:07.443 回答
4

不，如果您在标签上提到手风琴的话。来自 jQuery。

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

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

于 2010-04-01T06:37:02.093 回答
4

我会推荐这个插件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');
于 2012-03-01T19:05:06.020 回答
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>

发现这个

我不能让 jQuery UI 手风琴选项卡在使用时改变颜色（比如 a:visited），可以吗？

于 2013-10-10T23:20:56.037 回答
0

我知道我在回答一个 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>
于 2012-08-30T18:55:09.580 回答
0

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

CSS：

.myClassToBeHidden { display: none; }

jQuery：

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

如果您的意思是使用 jQuery UI 中的手风琴控件，那么......您不应该使用手风琴，扩展 all 不是它的用途，他们建议不要这样做，因为它会导致其他问题。

于 2010-04-01T06:36:02.350 回答
0

为了使它不显眼并且只有在访问者有javascript时才被隐藏，我会放

CSS：

#divToBeHidden { display: block; }

在<head>：

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

底部<body>：

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});
于 2010-04-01T06:41:12.693 回答
0

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

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

或者当然你可以得到这个 xtra, jquery-theme 插件

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"); });
})
于 2013-04-11T16:16:23.110 回答
0

这个问题被问到已经有 9 年了。但我发现下面的解决方案默认打开所有手风琴 div。这里我使用了 slideDown()方法来显示所有的 div 内容。

$(function () {
          $("#accordion").accordion({
                header: "> div > h3",
                collapsible: true,
               heightStyle: "content"
           });
          jQuery('#accordion h3.ui-accordion-header').next().slideDown();
 });
于 2019-08-29T11:47:52.190 回答
0

我这样做了：

jQuery( function( $ ) {
    $(document).ready(function(){
$( ".accordion" ).accordion({
        animate: 1000, 
        //animated: 'clip',
        autoHeight: true, 
        //collapsible: true,
        //fillSpace: false,
        heightStyle: "content"
    });
    $( ".accordion" ).each(function(index, el) {
        el.active=null
        $(el).find('h3').click(function(event){
            let accordion=$(this).closest(".accordion")
            if(accordion.length){
                if(!accordion[0].active){
                    accordion[0].active=$(this)
                    $(this).closest(".accordion").find('h3').not($(this)).removeClass('ui-accordion-header-active').removeClass('ui-state-active').next().removeClass('ui-accordion-content-active').slideUp()
                }
            }
        })
    });
    $('.accordion h3').addClass('ui-accordion-header-active').addClass('ui-state-active').next().addClass('ui-accordion-content-active').slideDown()
  })
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<h1>I will try to improve more</h1>
<div class="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    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.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>

于 2021-11-16T15:48:42.253 回答
-1

MultiAccordion jQuery UI 插件非常适合我： https ://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

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

$("#accordion_div"). multi Accordion("option", "active", [0,1] );

于 2015-03-23T14:06:04.537 回答
-1

我知道这真的为时已晚，但我今天找到了解决方案。只需简单地使用

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

全文链接

于 2013-01-27T08:06:29.437 回答