Question

我已经使用了崩溃插件来点击数据时切换数据，但我无法做到。所以这是我的代码。我已经导入了bootstrap文件，我是否必须使用其他东西？我想使用我在互联网上搜索过的表中的崩溃并试了很多东西，但没有任何作用

   <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，您打开一个正文标记两次......

然后，检查你的结束标签，（与打开的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。确保包含所需的所有库，并在引导程序（js）库之前加载jquery库。希望这有帮助。

检查Jsfiddle（外部资源）库的结构，你也可以找到它here

如何使用崩溃插件？

3 个答案: