twitter bootstrapアコーディオンが崩壊し、プラスマイナスで閉じる

私はBootstrap3を使用しています。私はアコーデオン成分を持っています。そのアコーデオンで、私はdivを開いて閉じます。しかし、私の要件は、アコーディオンのdivは、プラスとマイナスのアイコンをクリックするだけで開閉する必要があります。あなたのソースコードがあるので、行って欲しいものは不明である親のdivにtwitter bootstrapアコーディオンが崩壊し、プラスマイナスで閉じる

<div data-target="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" class="panel-group accordion1" aria-expanded="true"> 
         <div class="panel panel-default"> 
          <div class="panel-heading active"> 
           <h4 class="panel-title"> 
            <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a> 
           </h4> 
          </div> 

         <div class="panel-collapse collapse" id="earlierOwner1" aria-expanded="true"> 
          <div class="panel-body inputTable orderSRacccontent"> 
       <!-- payment mode section --> 
    <div class="row marginTop20"> 
     <div class="col-lg-12 col-md-12"> 
      <ul role="tablist" class="nav nav-tabs" id="paymentMode"> 
</ul> 
</div> 
</div>

出典

2016-05-17 sarvesh gannamaneedi

削除データトグル=「崩壊」と、プラスとマイナスのアイコンに

出典

2016-05-17 07:32:32

をそれを置く：私のコードは次のとおりです不十分。

アコーディオンを切り替えるプラス/マイナスボタンのみを使用する場合は、アンカー（<a>）タグに.panel-titleを入れないでください。代わりに、<p>または<h2>タグで囲みます。同じクラスで、プラス/マイナスグラフィックを含む<a>タグを追加し、それをトリガーとして設定します。

<div class="panel-heading active"> 
     <h4 class="panel-title"> 
       <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">This is where you'll want your icon.</a> 
       <p>O1-34676844<span class="spanAmtLeft">200</span></p> 
     </h4> 
</div>

出典

2016-05-17 07:39:40

この

$(document).ready(function(){ 
 
$('.collapse').on('shown.bs.collapse', function(){ 
 
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
 
}).on('hidden.bs.collapse', function(){ 
 
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
 
}); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</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.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body style="height:1500px"> 
 
<div class="container"> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
      <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a> 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <div class="row marginTop20"> 
 
     <div class="col-lg-12 col-md-12"> 
 
      <ul role="tablist" class="nav nav-tabs" id="paymentMode"> 
 
</ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

を試してみてください

出典

2016-05-17 08:42:08

twitter bootstrapアコーディオンが崩壊し、プラスマイナスで閉じる

答えて

関連する問題