如何使用折叠插件？

Question

我已经使用折叠插件在点击时切换数据，但我做不到。所以这是我的 code.I 导入了 bootstrap 文件，我是否必须使用其他东西？我想在 table 中使用 collapse 我已经在互联网上搜索并尝试了很多方法，但没有任何效果

   <body>
    <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="#collapseOne">
                   Click me to exapand. Click me again to collapse.
                   Section 1--hide method
                </a>
             </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
             <div class="panel-body">
              1 st collapse
             </div>
          </div>
       </div>
       <div class="panel panel-success">
          <div class="panel-heading">
             <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseTwo">
                   Click me to exapand. Click me again to collapse.
                   Section 2--show method
                </a>
             </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
             <div class="panel-body">
                 2 st collapse
             </div>
          </div>
       </div>
       <div class="panel panel-info">
          <div class="panel-heading">
             <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseThree">
                   Click me to exapand. Click me again to collapse.
                   Section 3--toggle method
                </a>
             </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
             <div class="panel-body">
               3 rd collapse
             </div>
          </div>
       </div>

          </div>
       </div>
    </div>
    <script type="text/javascript">
       $(function () { $('#collapseFour').collapse({
          toggle: false
       })});
       $(function () { $('#collapseTwo').collapse('show')});
       $(function () { $('#collapseThree').collapse('toggle')});
       $(function () { $('#collapseOne').collapse('hide')});
    </script> 
    <body>
      <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="#collapseOne">
                   Click me to exapand. Click me again to collapse.
                   Section 1--hide method
                </a>
             </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
             <div class="panel-body">
                1st collapse
             </div>
          </div>
       </div>
       <div class="panel panel-success">
          <div class="panel-heading">
             <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseTwo">
                   Click me to exapand. Click me again to collapse.
                   Section 2--show method
                </a>
             </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
             <div class="panel-body">
               2nd collapse
             </div>
          </div>
       </div>
       <div class="panel panel-info">
          <div class="panel-heading">
             <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseThree">
                   Click me to exapand. Click me again to collapse.
                   Section 3--toggle method
                </a>
             </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
             <div class="panel-body">
                3rd collapse
             </div>
          </div>
       </div>

          </div>
       </div>
    </div>
    <script type="text/javascript">
       $(function () { $('#collapseFour').collapse({
          toggle: false
       })});
       $(function () { $('#collapseTwo').collapse('show')});
       $(function () { $('#collapseThree').collapse('toggle')});
       $(function () { $('#collapseOne').collapse('hide')});
    </script> 
</body>

Answer 1

第一个问题来自您的 HTML，您打开了 body 标签两次...

然后，检查您的结束标签，（与打开的 div 数量相比太多 div 结束标签...）

看起来您在同一个框中将代码粘贴了两次...还有额外的错误...

然后，你会遇到这样的事情：

http://www.bootply.com/vV6VNB8Fiu

所以这是...工作...不是吗？ ^^

希望对您有所帮助 ;)

Answer 2

折叠插件的简单示例是我在这里描述的，

                <div class="panel panel-default">
                <a data-toggle="collapse" data-target="#idtocollapse">
                    <div class="panel-heading" style="font-size: 14px;">
                        <i class="plusminus pull-left glyphicon glyphicon-plus"></i>
                        <!--text1-->
                    </div>
                </a>
                <div id="idtocollapse" class="collapse text-left">
                    <div class="faq-answer">
                        <!--text2-->
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>

如上例所示，当您点击 text1 时，text2 将 collapse-in 和 collapse-out。

更多演示和理解你可以访问http://www.tutorialspoint.com/bootstrap/bootstrap_collapse_plugin.htm

Answer 3

我在 MVC 应用程序视图中尝试了您的代码（在删除重复的 <body> 之后），它工作正常，在 this jsfiddle 中也是如此。确保包含所有需要的库，并且 jquery 库在 bootstrap(js) 库之前加载。希望这有帮助。

勾选 Jsfiddle (external resources) for the structure of libraries, you can also find it here

如何使用折叠插件？

how to use collapse plugin?

jquery

collapse

twitter-bootstrap