Question

代码来自w3schools：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h

   <script type="text/javascript">
   $("#collapse1").collapse('hide');
   $("#collapse2").collapse('show');
   </script>

将以上代码添加到页面后，要手动隐藏第一个面板并显示下一个面板，前两个面板会在显示时停止隐藏其他面板。

如何解决这个问题？

更新：默认情况下，我不希望第一个面板被隐藏，第二个面板可见，我想在按钮点击（或任何其他javascript代码）上执行该操作。另外通过onclick添加和删除类删除动画不会导致图标更改事件（http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h）

Answer 1

添加自己的脚本对于bootstrap手风琴的行为方式有点令人不安。要实现上述结果，您不需要脚本，可以使用类.collapse执行此操作：隐藏内容，.collapse.in：显示内容。

因此，请在HTML中进行以下更改：

 <div id="collapse1" class="panel-collapse collapse in">

到

<div id="collapse1" class="panel-collapse collapse">

和

<div id="collapse2" class="panel-collapse collapse">

到

<div id="collapse2" class="panel-collapse collapse in">

实现同样的目标。请看小提琴：“http://jsfiddle.net/72nfxgjs/1/”

Answer 2

评论：

<script type="text/javascript">
  //$("#collapse1").collapse('hide');
  //$("#collapse2").collapse('show');
</script>

从＆＃34;＃collapse1＆＃34;

in

从＆＃34;＃collapse2＆＃34;

in

参考以下代码：

<div class="container">
<h2>Collapse</h2>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse in">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>
</div>
</div>


<script type="text/javascript">
//$("#collapse1").collapse('hide');
//$("#collapse2").collapse('show');
</script>

Bootstrap：使用“折叠方法”后，折叠不起作用

2 个答案: