私は非常にシンプルなwebappを構築しようとしています。私はブートストラップに慣れていないので、いくつかのチュートリアルに従ってきましたが、私が間違っていることを理解できないようです。折りたたみ機能はうまく機能しますが、拡大する機能は他の機能を縮小しません。折りたたみ式のアイテムとして行動するためにはブートストラップに問題があるAccordion

<!DOCTYPE html>

アコーディオン

<div id="accordian" role="tablist" aria-multiselectable="true"> 
     <div class="card"> 
      <div class="card-header" role="tab" id="headingOne"> 
       <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one"> 
        <h4 class="mb-0"> 
         One 
        </h4> 
       </a> 
      </div> 
      <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="card-block"> 
        <ul> 
         <li>A</li> 
         <li>B</li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div class="card"> 
      <div class="card-header" role="tab" id="headingTwo"> 
       <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two"> 
        <h4 class="mb-0"> 
         Two 
        </h4> 
       </a> 
      </div> 
      <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
       <div class="card-block"> 
        <ul> 
         <li>C</li> 
         <li>D</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div data-role="footer"> 
     <h1>Footer</h1> 
    </div> 
</body>

出典

2017-02-12 user1784207

を：ここでは私が働いているコードですアコーディオン（折り畳み可能な他の要素をすべて折りたたんでいるとき）は、折りたたみ可能な要素を含む囲みdiv要素に 'panel-group'クラスを追加する必要があります。パネルグループdiv内のすべてのパネルにクラス 'panel'を追加するだけです。

 <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel card"> 
 
      <div class="card-header " role="tab" id="headingOne"> 
 
       <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one"> 
 
        <h4 class="mb-0"> 
 
         One 
 
        </h4> 
 
       </a> 
 
      </div> 
 
      <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
       <div class="card-block"> 
 
        <ul> 
 
         <li>A</li> 
 
         <li>B</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="panel card"> 
 
      <div class="card-header" role="tab" id="headingTwo"> 
 
       <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two"> 
 
        <h4 class="mb-0"> 
 
         Two 
 
        </h4> 
 
       </a> 
 
      </div> 
 
      <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
       <div class="card-block"> 
 
        <ul> 
 
         <li>C</li> 
 
         <li>D</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

出典

2017-02-13 01:15:44 Inkdot

ブートストラップに問題があるAccordion

アコーディオン

答えて

関連する問題