2017-01-05 9 views
7

最初に、テキストを含む領域をクリックすると、ブートストラップv4アコーディオンが折りたたまれます。どのように私はそれをその部門の全領域に折り畳むことができます。ヘッダdiv全体をクリックすると、ブートストラップv4のアコーディオンが崩壊するのですか?

ここにブートストラップのコード。

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
     </div> 
    </div> 
    </div> 
</div> 

答えて

4

は、ジャストアンカー順序を変更するには、デモで試してみてください、あなたのCSS

.mb-0 > a { 
    display: inline-block; 
    width: 100%; 
    padding:0.75rem 1.25rem; 
} 
.card-header { 
    padding:0; 
} 

にこのスタイルを追加スニペットを実行して、フルスクリーン表示

.mb-0 > a { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding:0.75rem 1.25rem; 
 
} 
 
.card-header { 
 
    padding:0; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<style> 
 

 
.mb-0 > a { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding:0.75rem 1.25rem; 
 
} 
 
.card-header { 
 
    padding:0; 
 
} 
 

 
</style> 
 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingOne"> 
 
     <h5 class="mb-0"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h5> 
 
    </div> 
 

 
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingTwo"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

+1

のdivの100%幅にアンカーを展開するが、それでもいくつかのスペースを持つということクリックがうまくいかないdivを上下に移動します。 –

+1

今すぐお試しください。どこにでもマウスを移動してください。 –

+1

ありがとうございます@Naila。これは私のために働いた。 –

2

をクリックしてください私は別の簡単な解決策を見つけられませんでした。

この時点でのブートストラップのv4はアルファ版であり、この時点でいくつかの奇妙なスクリプトエラーが発生しています。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 

 

 

 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="card"> 
 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
    <div class="card-header" role="tab" id="headingOne" > 
 
     <h5 class="mb-0"> 
 
     
 
      Collapsible Group Item #1 
 
     
 
     </h5> 
 
    </div> 
 
</a> 
 
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion"> 
 
     <h5 class="mb-0"> 
 
    
 
      Collapsible Group Item #2 
 
     
 
     </h5> 
 
    </div> 
 
    </a> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+1

ありがとうございます。ヘルプをよろしくお願いいたします。 –

0

だけ..ヘッダーのdivにdata-targetを使用

<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
    <h5 class="mb-0"> 
     <a href> 
      Collapsible Group Item #1 
     </a> 
    </h5> 
</div> 

http://www.codeply.com/go/f6LLnOaKHu

+1

このソリューションは、コードサンプルでも機能していないようです。 –

+0

Codeplyで動作したかどうかは分かりますか? – ZimSystem

+2

それは共同で働いた。しかし、私が書いたブートストラップコードではありません。そしてdivタグとanchorタグの両方で、data- * thingを使用しています。 Btwありがとう。答えを見つけました。 –

関連する問題