如何让我的手风琴在所有菜单关闭的情况下加载.

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

本文关键字:菜单 加载 情况下 我的 手风琴      更新时间:2023-09-26

我正在尝试遵循这里的示例

http://twitter.github.com/bootstrap/javascript.html#collapse

我在这里放置了一个模型

http://jsfiddle.net/gqe7g/

加载行为很奇怪。 它显示菜单 1 然后折叠它,然后显示菜单 2 和菜单 3。 我希望一切都打开折叠。 我尝试了以下方法但没有成功

$('#accordion').collapse({hide: true})

从文档中:

如果您希望它默认打开,请添加其他类。

换句话说,省略"in",它将默认关闭。 http://jsfiddle.net/JBRh7/

如果要

在页面加载时关闭所有折叠的内容:

在类collapse in中将其替换为类collapse

id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">

更新到:

id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

替换

$(".collapse").collapse();
$('#accordion').collapse({hide: true})

跟:

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

应该做这个伎俩。我认为第一个是默认打开的,而这一行将其关闭。

更改

class="accordion-body collapse in"

class="accordion-body collapse"

在你的崩溃一个DIV

如果您希望手风琴最初折叠,您可以使用预先存在的引导定义来实现,javascript 是不必要的。

将类collapsed添加到锚点或句柄,这些锚点或句柄将成为用户打开/关闭它们的链接目标。 此外,从折叠容器中删除 in 类。

Bootstrap还提供了几个可选规范,可以通过添加data-parent=""data-toggle=""来传递

  • data-parent接受选择器,并指定作为数据父级同级的所有可折叠元素将一致切换。
  • data-toggle接受布尔truefalse,并对可折叠元素设置调用。

示例场景:

将加载折叠

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Details

将加载扩展

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body">
            <div class="accordion-inner">
                Details

将加载扩展

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Details

在第三个示例中,无论指定了collapsed类,折叠项都将默认为展开,因为容器上的in类将获得更多权重。


如果你确实想通过Javascript触发手风琴,你只需要调用方法collapse()以及针对可折叠元素的适当的id或类选择器。

collapse() 还接受可以添加到标记中的相同选项。 data-parentdata-toggle

您缺少 Menu2 和 Menu3 的手风琴体div 上的类 'in'

您的每个手风琴体DIV都需要有class="accordion-body collapse in"。现在,他们中的一些人只有class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

您可以将选项toggle: false传递给 collapse 语句,以便在加载时隐藏手风琴的所有元素,如下所示:

$('.collapse').collapse({
    toggle: false
});

演示:http://jsfiddle.net/gqe7g/9/

这是我

用于手风琴的。 它开始完全关闭。你想要

 active: false;//this does the trick

满:

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

不熟悉 bottstrap,但这似乎比您必须处理的所有类都干净一些,并且运行顺利。

只需从"collapseOne"中的.panel-collapse中删除.in类。(引导程序 v3.3.7(

使用 Bootstrap 提供的 hide 方法,

$('.collapse').collapse('hide')

http://thefanciful.com 演示。我的信息在加载时被隐藏,并在按下按钮时激活。:)

使用 jQuery,这对我在页面加载时折叠所有容器都很有用

添加{active: false},当然必须启用collapsible

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });
<script type="text/javascript">  
    jQuery(document).ready(function ($) {
       $('#collapseOne').collapse("hide");
    });      
</script>
我知道

这是一个古老的讨论,但这里有两个有效的解决方案:

1( 添加

一类aria-expanded="true"在此链接内:

<a data-toggle="collapse" data-parent="#accordion"...></a>

2(如果您使用的是面板(如下所示(

<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">

collapse in更改为collapse out也可以解决问题

我知道

这可能是一种有点笨拙的方式,但我添加了自定义 css:

.elementor-accordion-item:first-child { display: none; }

然后复制列表中的第一项,这样做的好处是,如果您在页面或网站上有多个手风琴,则只需执行此操作一次。