logo标签列表

jQuery手风琴展开所有div

jqueryaccordionexpansion
6
页面加载时或事件发生时，是否可以展开所有组件？
谢谢！
1
请查看此答案：https://dev59.com/9Wcs5IYBdhLWcg3wcTk0，并且这里有一个示例：http://jsfiddle.net/bigvax/hEApL/ - NoWar
12个回答
14

只需要使用这个

$('#accordion .ui-accordion-content').show();
2
请注意，通过激活新手风琴，当前已激活的手风琴将被折叠。 - Aprillion
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');
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），我可以吗？

非常好的例子，谢谢，正是我想要的！ - Alfred Alfizo Mosima
4
0

你可以在jQuery提供的document.ready事件中完成，像这样：

CSS：

.myClassToBeHidden { display: none; }

jQuery：

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

如果你指的是jQuery UI的手风琴控件，那么... 你不应该使用手风琴控件来展开全部内容，因为这并不是它设计的初衷，而且他们也不建议这样做，因为这会导致其他问题。
@durilai - 根据问题不确定他们在问什么，只是在每个问题周围添加了更多信息。 - Nick Craver
0
为了使其不显眼，只有在访问者启用了JavaScript时才隐藏，我会放置以下代码：
CSS：
#divToBeHidden { display: block; }

在标签中：
$('#divToBeHidden').hide();

<body>底部：

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});
@elcherino：我不确定我是否正确理解了你的问题，请进一步说明你想要做什么。 - David Andersson
你可以在任何地方放置一个 $(function() { }); 函数...它不会在文档准备好之前运行，也不会阻塞页面 :) - Nick Craver
@Nick Craver：哦，当然，你是对的。谢谢。只是我喜欢把所有运行时的东西放在底部。 :) - David Andersson
我的问题是：我有一个js文件。我的js文件在我的页面中搜索文本。但是，即使文本存在于隐藏的div中，我的脚本也无法找到它。 因此，我的想法是：当用户在我的文本输入框中输入字符串时，自动展开所有的div，这样我的搜索脚本就可以运行，用户就可以找到文本了。 对不起，我的英语不好 :-) - user305912
0

我知道我在回答一个两年前的问题，但是没有任何解决方法或替代手风琴插件适用于我，所以我想出了一个非常简单的解决方法：只需在“展开全部”链接的点击事件中销毁手风琴，并在“折叠全部”链接的点击事件中重新初始化它。就像这样：

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

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

只需使用jQueryUI的类和一点JS创建自己的手风琴即可。这非常容易，并且与您的jQueryUI ThemeRoller保持一致。如果您想要“额外”的选项，“官方手风琴小部件”提供了所有这些选项，您可以使用更多的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"); });
})
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>

0

这个问题被提出已经有9年了。但是我找到了以下解决方案，可以默认打开所有手风琴div。在这里，我使用了slideDown()方法来显示所有div内容。

$(function () {
          $("#accordion").accordion({
                header: "> div > h3",
                collapsible: true,
               heightStyle: "content"
           });
          jQuery('#accordion h3.ui-accordion-header').next().slideDown();
 });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接