web-dev-qa-db-ja.com

Bootstrap折りたたみが正しく機能しない（非表示が機能しない）

bootstrap折りたたみ機能がIBMWebポータルで正しく機能していません。「表示」機能では正常に機能しますが、「非表示」機能では機能しません。

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

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

コンソールウィンドウに、「area-expanded」の値は折りたたまれても変更されず、「collapsed」やcollapse in”。

それを修正する方法。

twitter-bootstraptwitter-bootstrap-3websphere-portal
6
CodeMan

あなたのコードは機能します！ただし、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>
4
Yasas Senarath

私は同じ問題に遭遇しました、これには多くの理由があります、繰り返し参照を削除するために、ページにbootstrapライブラリへの繰り返し参照がないことを確認してください。

1
Rakesh Bk

以下のコードを見てください、それはあなたを助けるかもしれません

<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>
0
Iqbal Pasha