引导列表组崩溃未发生

Question

I'm trying to follow this site: http://jsfiddle.net/Cqp7w/ 我正在尝试关注此网站： http : //jsfiddle.net/Cqp7w/

to make a collapsible list group, which will behave exactly like "Collapse (as seen in documenatation)" part in the link I pasted above. 制作一个可折叠的列表组，其行为与我上面粘贴的链接中的“折叠（如在文档中所见）”部分完全一样。

Yet the collapse part didn't work when I copied the corresponding html and css code to my machine, although other parts and styles work fine. 但是，当我将相应的html和css代码复制到我的机器上时，折叠部分不起作用，尽管其他部分和样式也可以正常工作。 I think I might need to import some other library in my html, but I couldn't figure it out by searching online, please help :) 我想我可能需要在html中导入其他库，但是我无法通过在线搜索来解决这个问题，请帮助:)

Thanks a lot! 非常感谢！

css & html code: CSS和HTML代码：

 body { padding: 2em; } .panel-group .list-group { margin-bottom: 0; } .panel-group .list-group .list-group-item { border-radius: 0; border-left: none; border-right: none; } .panel-group .list-group .list-group-item:last-child { border-bottom: none; }

 <!doctype html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link type="text/css" rel="stylesheet" href="css/style.css" media="screen" /> </head> <body> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <h1>Collapse (as seen in documenatation)</h1> <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">Collapsible Group Item #1</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </body> </html>

Answer 1

Bootstrap's Javascript requires the jQuery library to function properly. Bootstrap的Javascript需要jQuery库才能正常运行。 Load jQuery before loading bootstrap by adding the line: 在加载引导程序之前，通过添加以下行来加载jQuery：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

and it should work fine. 它应该可以正常工作。

Also, consider moving the script loading to the bottom of your page, just before </body> . 另外，请考虑将脚本加载位置移动到页面底部</body>之前。 By placing the JS at the bottom of the page, you allow the page to load the content and render it before loading and executing javascript, giving the appearance of faster page load times. 通过将JS放在页面底部，可以允许页面加载内容并在加载和执行javascript之前呈现它，从而使页面加载速度更快。

Answer 2

did you try this ! 你尝试过这个！ itz working like your demo . itz像您的演示一样工作。 you forget to add ` 你忘了加`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>`

this jquery link . 这个jquery链接。

 body { padding: 2em; } .panel-group .list-group { margin-bottom: 0; } .panel-group .list-group .list-group-item { border-radius: 0; border-left: none; border-right: none; } .panel-group .list-group .list-group-item:last-child { border-bottom: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <h1>Collapse (as seen in documenatation)</h1> <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">Collapsible Group Item #1</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>

引导列表组崩溃未发生

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-01 05:56:24

解决方案2
1 2015-11-01 05:59:05

引导列表组崩溃未发生

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-01 05:56:24

解决方案2 1 2015-11-01 05:59:05

解决方案1
2 已采纳 2015-11-01 05:56:24

解决方案2
1 2015-11-01 05:59:05