如何在單擊整個標題div時使Bootstrap v4手風琴摺疊？

Question

最初，當有文字的區域被點擊時，bootstrap v4手風琴可摺疊。我如何使它可以摺疊到整個區域。

這裏是bootstrap的代碼。

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

Answer 1

這種風格添加到您的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>

Answer 2

只要改變錨順序，我還沒找到另一個簡單的解決方案。

請注意，此時bootstrap的v4處於alpha版本，此時正在給出一些奇怪的腳本錯誤。

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

Answer 3

只需使用在標題的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