blocks|key|642047|text|替换|type|unstyled|depth|inlineStyleRanges|entityRanges|data|642048|$(".collapse").collapse();
$('#accordion').collapse({hide:+true})|code-block|syntax|javascript|642049|通过以下方式：|642050|$('#collapseOne').collapse("hide");|642051|应该能行得通。我认为第一个默认情况下是打开的，而这一行是关闭它的。|642052|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Replacing</p>

<pre><code>$(".collapse").collapse();
$('#accordion').collapse({hide: true})
</code></pre>

<p>with:</p>

<pre><code>$('#collapseOne').collapse("hide");
</code></pre>

<p>should do the trick. I think the first one is toggled on by default and this one line switches it off.</p>


blocks|key|642151|text|如果您想在页面加载时关闭所有折叠的页面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|642152|在collapse+in类中，将其替换为collapse类。|offset|length|style|CODE|642153|id="collapseOne"+class="panel-collapse+collapse+**in**"+role="tabpanel"+aria-labelledby="headingOne">|code-block|syntax|javascript|642154|更新为：|642155|id="collapseOne"+class="panel-collapse+collapse"+role="tabpanel"+aria-labelledby="headingOne">|642156|entityMap^0|0|1|B|K|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>If you want to close all collapsed on page load:</p>

<p>In class <code>collapse in</code> replace it to class <code>collapse</code>.</p>

<pre><code>id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne"&gt;
</code></pre>

<p>Update to:</p>

<pre><code>id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
</code></pre>


blocks|key|427505|text|您错过了Menu2和Menu3的accordion-body+div中的“in”类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|427506|每个手风琴主体div都需要有class="accordion-body+collapse+in"。现在，他们中的几个只有class="accordion-body+collapse"|offset|length|style|CODE|427507|http://jsfiddle.net/fcJJT/|427508|entityMap|0|LINK|mutability|MUTABLE|url^0|0|E|Y|1O|V|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|I]]]]

<p>you're missing the class 'in' on accordion-body divs for Menu2 and Menu3</p>

<p>each of your accordion-body divs needs to have <code>class="accordion-body collapse in"</code>. Right now, a couple of them just have <code>class="accordion-body collapse"</code></p>

<p><a href="http://jsfiddle.net/fcJJT/">http://jsfiddle.net/fcJJT/</a></p>


blocks|key|642098|text|您可以将选项toggle:+false传递给折叠语句，以便在加载时隐藏折叠面板的所有元素，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|642099|$('.collapse').collapse({
++++toggle:+false
});|code-block|syntax|javascript|642100|演示：http://jsfiddle.net/gqe7g/9/|642101|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/gqe7g/9/^0|6|D|0|0|3|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can pass the option <code>toggle: false</code> to the collapse statement to have all elements of the accordion hidden on load, like so:</p>

<pre><code>$('.collapse').collapse({
    toggle: false
});
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/gqe7g/9/" rel="nofollow">http://jsfiddle.net/gqe7g/9/</a></p>


blocks|key|427561|text|这就是我的手风琴。它一开始是完全封闭的。你想要的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|427562|+active:+false;//this+does+the+trick|code-block|syntax|javascript|427563|完整：|427564|<div+id="accordian_div">
++++<h1>first</h1>
++++++++<div>
++++++++++++put+something+here
++++++++</div>
++++<h1>second</h1>
++++++++<div>
++++++++++++put+something+here
++++++++</div>
++++<h1>third</h1>
++++++++<div>
++++++++++++put+something+here
++++++++</div>
</div>

<script+type="text/javascript">
+++++$(document).ready(function()+{
++++++++$("#accordian_div").accordion({
++++++++++++collapsible:+true,
++++++++++++active:+false,
++++++++++++clearStyle:+true
++++++++});
++++++});
</script>|427565|不熟悉bottstrap，但这似乎比你必须处理的所有类都要干净一点，而且工作起来很流畅。|427566|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>this is what i use for my accordian. it starts off fully closed.
you want</p>

<pre><code> active: false;//this does the trick
</code></pre>

<p>full:</p>

<pre><code>&lt;div id="accordian_div"&gt;
    &lt;h1&gt;first&lt;/h1&gt;
        &lt;div&gt;
            put something here
        &lt;/div&gt;
    &lt;h1&gt;second&lt;/h1&gt;
        &lt;div&gt;
            put something here
        &lt;/div&gt;
    &lt;h1&gt;third&lt;/h1&gt;
        &lt;div&gt;
            put something here
        &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
     $(document).ready(function() {
        $("#accordian_div").accordion({
            collapsible: true,
            active: false,
            clearStyle: true
        });
      });
&lt;/script&gt;
</code></pre>

<p>Not familiar with bottstrap but this seems a bit cleaner than all the classes you have to deal with and works smoothly.</p>


blocks|key|642207|text|只需从"collapseOne“中的.panel-collapse中删除.in类即可。(Bootstrap+v3.3.7)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|642208|entityMap^0|I|F|10|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Just remove the <code>.in</code> class from <code>.panel-collapse</code> in "collapseOne". (Bootstrap v3.3.7)</p>


blocks|key|427611|text|使用Bootstrap提供的hide方法，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|427612|$('.collapse').collapse('hide')|code-block|syntax|javascript|427613|在http://thefanciful.com上演示。我的信息在加载时被隐藏，并在按下按钮时激活。:)|offset|length|427614|entityMap|0|LINK|mutability|MUTABLE|url|http://thefanciful.com/^0|0|0|1|M|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Use the hide method that Bootstrap provides, </p>

<pre><code>$('.collapse').collapse('hide')
</code></pre>

<p>Demo at <a href="http://thefanciful.com" rel="nofollow">http://thefanciful.com</a>. My information is hidden on load, and activates when the button is pushed. :)</p>


blocks|key|427645|text|<script+type="text/javascript">++

++++jQuery(document).ready(function+($)+{

+++++++$('#collapseOne').collapse("hide");
++++});++++++

</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|427646|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script type="text/javascript"&gt;  

    jQuery(document).ready(function ($) {

       $('#collapseOne').collapse("hide");
    });      

&lt;/script&gt;
</code></pre>


blocks|key|427689|text|我知道这是一个老生常谈的话题，但这里还有两个有效的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|427690|1)添加|427691|此链接中的aria-expanded="true"类：|offset|length|style|CODE|427692|<a+data-toggle="collapse"+data-parent="#accordion"...></a>|code-block|syntax|javascript|427693|2)以防您使用面板(如下所示)|427694|<div+id="collapse1"+class="panel-collapse+out+collapse+in"+style="height:+auto;">|427695|将collapse+in更改为collapse+out也可以完成此操作|427696|entityMap^0|0|0|5|K|0|0|0|0|1|B|F|C|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@$F|Z|G|10|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

<p>I know this is an old discussion, but here are two more solutions that worked:</p>

<p>1) Add</p>

<p>a class of <code>aria-expanded="true"</code>
inside this link:</p>

<pre><code>&lt;a data-toggle="collapse" data-parent="#accordion"...&gt;&lt;/a&gt;
</code></pre>

<p>2) In case you're using panels (like below)</p>

<pre><code>&lt;div id="collapse1" class="panel-collapse out collapse in" style="height: auto;"&gt;
</code></pre>

<p>changing <code>collapse in</code> to <code>collapse out</code> will also do the trick</p>


blocks|key|427855|text|我知道这可能有点老生常谈，但我添加了自定义的css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|427856|.elementor-accordion-item:first-child+{+++++display:+none;+}|offset|length|style|CODE|427857|然后复制列表中的第一项，最棒的是如果你在页面或站点上有多个折叠面板，你只需要做一次。|427858|entityMap^0|0|0|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>I know it may be a slightly hacky way but I added custom css: </p>

<p><code>.elementor-accordion-item:first-child {
    display: none;
}</code></p>

<p>and then duplicated the first item on the list, the great thing with this is if you have multiple accordions on the page or site you only need to do this once.</p>


<p>I'm trying to follow the example here</p>

<p><a href="http://twitter.github.com/bootstrap/javascript.html#collapse" rel="noreferrer">http://twitter.github.com/bootstrap/javascript.html#collapse</a></p>

<p>I have placed a mockup here</p>

<p><a href="http://jsfiddle.net/gqe7g/" rel="noreferrer">http://jsfiddle.net/gqe7g/</a></p>

<p>Loading behavior is strange.  It shows Menu1 then collapses it then shows Menu2 and Menu3.  I would like everything to open collapsed.  I have tried the following without success</p>

<pre><code>$('#accordion').collapse({hide: true})
</code></pre>


How do I get my accordion to load with all the menus closed?

jQuery

我正在尝试遵循这里的示例我在这里放了一个模型加载行为很奇怪。它显示Menu1，然后折叠它，然后显示Menu2和Menu3。我希望所有的东西都能打开折叠。我尝试过以下几种方法，但都没有成功$('#accordion').collapse({hide: true})

问如何在所有菜单都关闭的情况下加载我的手风琴？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在所有菜单都关闭的情况下加载我的手风琴？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在所有菜单都关闭的情况下加载我的手风琴？
EN