简体   繁体   English

此页面如何与Bootstrap 3.3.4中的Collapse.js一起使用?

[英]How doesn't this page work with Collapse.js in Bootstrap 3.3.4?

I'm using Bootstrap v.3.3.4. 我正在使用Bootstrap v.3.3.4。 All of my resources are relatively linked and the html file is in the right location to access them. 我所有的资源都是相对链接的,并且html文件在正确的位置可以访问它们。

I'm making a 'Learn More' button and have it show a collapsed unordered list either above it or below it when pressed. 我正在制作一个“了解更多”按钮,并在按下该按钮时在其上方或下方显示一个折叠的无序列表。

I can't get any button or link to toggle a collapsed element. 我无法获得任何按钮或链接来切换折叠的元素。

Here's an example of what I'm trying to do: 这是我要执行的操作的一个示例:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#moreInfo" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
        <div class="collapse" id="moreInfo">
            <div class="well">
                <ul>
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                    <li>list item 4</li>
                    <li>list item 5</li>
                </ul>
            </div>
        </div>
        </body>
    </html>

I think you just forgot to link jquery library. 我想您只是忘了链接jquery库。 :) :)

your html lines work just fine if you try at: http://www.bootply.com/new# 如果您尝试以下操作,则您的html行就可以正常工作: http : //www.bootply.com/new#

if that doesn't work, you can explicitly invoke collapse on initial load. 如果这不起作用,则可以在初始加载时显式调用崩溃。

$('#moreInfo').collapse();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM