Question

我正在尝试使用Bootstrap创建可折叠组件。我的代码就是这个

＆＃13;

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<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
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃34;可折叠组项目＃1＆＃34;点击时应该折叠课程中的项目＆＃34; panel-body＆＃34;但它没有点击效果。我直接从Bootstrap文档中复制了这段代码，但它仍无法正常工作。任何人都可以找出问题所在吗？

Answer 1

jQuery是必需的; - ）

DEMO

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<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">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>

Answer 2

bootstrap.js正在使用jquery库，所以你需要在bootstrap js之前添加jquery库。

所以请添加jquery库，如

注意：请维护js文件的顺序。 html页面使用从上到下的编译方法

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

Answer 3

添加jQuery并确保只有一个jQuery链接导致多个不起作用...

Answer 4

我疯了一个小时... 7 年后我才回答这个问题，因为如果你使用的是新的 Boostrap 5，属性是 data-bs-parent、{{ 1}}和data-bs-target，注意中间的-bs-。

Answer 5

你需要jQuery看到bootstrap的basic template

Answer 6

如果您使用的是最新的 Bootstrap 版本。然后你只需要把这个 data-bs-toggle="collapse" data-bs-target="#navbarNav" 替换成这个 data-toggle="collapse" data-target="#navbarNav" 并且不需要做更多。这意味着您只需要删除 -bs-

Answer 7

如果使用 Bootstrap 4.5 折叠组件，请在 HTML 标签主体内使用这两个链接

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Answer 8

我遇到了这个问题，问题是没有在Yii2框架中加载bootstrap.js。首先检查是否将jquery加载到inspect中，然后再检查是否加载了bootstrap.js？如果使用了任何工具提示，则在bootsrap之前需要Popper.js .js。

Answer 9

确保更改引导 CDN 版本以进行检查。尝试 bootstap4 。避免使用 bootstrap 5，因为它仍处于测试阶段

Answer 10

另一个很好的原因是 html 格式不正确，所以事情没有正确关闭，或者你的 id 标签中有句号之类的东西，jquery 会望而却步。

Answer 11

可能您的移动视图端口未设置。在<head></head>中添加以下元标记，以允许菜单在移动设备上运行。

<meta name=viewport content="width=device-width, initial-scale=1">

Bootstrap折叠不折叠

11 个答案: