Fatal编程技术网
  • jquery/
  • Jquery 如何使用折叠插件？

Jquery 如何使用折叠插件？

jquery twitter-bootstrap

Jquery 如何使用折叠插件？,jquery,twitter-bootstrap,collapse,Jquery,Twitter Bootstrap,Collapse,我已经使用了折叠插件来切换点击时的数据，但我无法做到。这是我的代码。我已经导入了引导文件，我需要使用其他东西吗？我想使用我在互联网上搜索过的折叠表，尝试了很多方法，但都没有效果 <body> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading">

我已经使用了折叠插件来切换点击时的数据，但我无法做到。这是我的代码。我已经导入了引导文件，我需要使用其他东西吗？我想使用我在互联网上搜索过的折叠表，尝试了很多方法，但都没有效果

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


第一次崩塌
第二次崩塌
第三次崩溃
$（函数（）{$（'#collapseFour'）.collapse({
切换：false
})});
$（函数（）{$（'#collapseTwo'）.collapse（'show'）}）；
$（函数（）{$（'#collapseThree'）.collapse（'toggle'）}）；
$（函数（）{$（'#collapseOne'）.collapse（'hide'）}）；
第一次崩塌
第二次崩塌
第三次崩塌
$（函数（）{$（'#collapseFour'）.collapse({
切换：false
})});
$（函数（）{$（'#collapseTwo'）.collapse（'show'）}）；
$（函数（）{$（'#collapseThree'）.collapse（'toggle'）}）；
$（函数（）{$（'#collapseOne'）.collapse（'hide'）}）；
第一个问题来自HTML，您打开了一个body标记两次

然后，检查结束标记（与打开的div数量相比，div结束标记过多…）

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

然后，你会得出这样的结论：

所以这是。。。工作不是吗^^

希望有帮助；）

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

然后，检查结束标记（与打开的div数量相比，div结束标记过多…）

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

然后，你会得出这样的结论：

所以这是。。。工作不是吗^^

希望有帮助；）

我在这里描述了一个简单的崩溃插件示例

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



我在这里描述了一个简单的崩溃插件示例


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





我在MVC应用程序视图中尝试了您的代码（在删除重复的
之后），它运行良好，在中也一样。
确保包含了所需的所有库，并且jquery库在引导（js）库之前加载。
希望这有帮助

检查（外部资源）以了解库的结构，您也可以找到它
我在MVC应用程序视图中尝试了您的代码（删除重复的
），它运行良好，在中也一样。
确保包含了所需的所有库，并且jquery库在引导（js）库之前加载。
希望这有帮助


查看（外部资源）以了解库的结构，您还可以找到它
您的代码似乎工作正常。。。问题出在哪里？将
数据目标
属性放在一个标记中，该标记是目标div的id。您的代码似乎工作正常。。。问题出在哪里？将
数据目标
属性放在一个id为target div的标记中我尝试了它，但它不起作用，当我在bootly上写入它时，我不知道它出了什么问题。我尝试运行你的代码，但它也不起作用。我复制粘贴了它。我尝试了它，但它不起作用，当我在bootly上写它时，它工作了，我不知道它有什么问题。我试图运行你的代码，但它也不工作，我已经复制粘贴了它。@AbdulMuqeet检查我发布的bootply示例，这个“折叠”的东西工作了，不是吗^^它在bootly上运行，但在我的机器上复制粘贴时不起作用。所以问题出在您的代码中的某个地方。。。也许在你的js脚本中包含了什么…@AbdulMuqeet检查一下我发布的bootply示例，这个“崩溃”的东西正在工作，不是吗^^它在bootly上运行，但在我的机器上复制粘贴时不起作用。所以问题出在您的代码中的某个地方。。。我编辑了我的答案以包含你的要求。你能告诉我我应该包含图书馆的结构吗？我编辑了我的答案以包含你的要求。