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

Question

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

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

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

我在控制台中看到 window “area-expanded” 值在我们的崩溃中没有改变，也没有改变 class 名称，如“ 崩溃”并崩溃在”。

如何修复。

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

您的代码有效！但是，没有 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 3

我运行遇到了同样的麻烦，造成这种情况的原因有很多，请确保页面中没有对 bootstrap 库的重复引用，对我来说删除重复引用是有效的。

Answer 4

在

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

该代码可以解决您的问题

Answer 5

我与 Bootstrap 5 有同样的问题。我的解决方法是添加 Javascript 函数之一来处理“隐藏”事件，并让它返回 false。

例如

$("#searchMapDiv").on('hide.bs.collapse',
                    function()
                    {                       
                            console.log("hide");
                            return false;
                                                
                    }
                );

有趣的是，在此函数中触发 JavaScript 错误也会隐藏块...

 $("#searchMapDiv").on('hide.bs.collapse',
                        function()
                        {                       
                                $("#searchMapDiv").badcollapse();
                                                    
                        }
                    );

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

Bootstrap Collapse not working properly (Hide Not working)

twitter-bootstrap

twitter-bootstrap-3

websphere-portal