Question

我正在使用bootstrap折叠功能在我们的IBM Web门户中无法正常工作。它在“显示”功能上运行良好，但在“隐藏”功能中无效。

<a href="#demo" data-toggle="collapse"><span class=”icon”>Collapsible</span></a>

<div id="demo" class="collapse">
Sample Code 
</div>

我在控制台窗口中看到“区域扩展”值在我们的崩溃中没有改变，也没有像“折叠”那样更改类名并且崩溃在”。

如何修复它。

Answer 1

您的代码有效！但是，没有jquery，它就无法正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <a href="#demo" data-toggle="collapse"><span class=”icon”>Collapsible</span></a>

    <div id="demo" class="collapse">
    Sample Code 
    </div>
</div>

</body>
</html>

Answer 2

查看以下代码，它可能对您有所帮助

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="panel1">panel 1 <br>
<input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="panel2"> panel 2
<div class="panel-heading" id="collapse1" class="panel1">
  <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
      you are now in body of panel1
    </div>
  </div>
</div>
<div class="panel-heading" id="panel2" class="collapse">
  <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
      you are now in body of panel 2
    </div>
  </div>
</div>

Answer 3

我遇到了同样的麻烦，原因很多，请确保页面中没有重复的引用来引导库，因为我删除了重复的引用工作。

Answer 4

in

<head>    
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

在身体的最后，你添加：

<body>
..............
    <script src="js/jquery-1.11.3.min.js"></script>
</body>

该代码可以解决您的问题

Bootstrap折叠无法正常工作（隐藏不起作用）

4 个答案: