Bootstrap Accordion Collapse中的問題

Question

第一種 - 因此對我的壞英語發難

我已經添加了手風琴。它應該像Google一樣工作。 我的代碼是這樣的

1. 當你點擊標題，它擴展
2. 當你的標題點擊再次，它崩潰
3. 如果我點擊第二個標題，它打開，但第一個仍然開放。我希望在我擴展其他任何一個時關閉它。

這是我的代碼。我使用的引導3

<div class="accordion" id="accordion2" > 
     <div class="accordion-group"> 
      <div class="accordion-heading headding_new" style="height:58px;"> 
       <a class="accordion-toggle toggle_font" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" > 
       </a> 
      </div> 



      <div id="collapseOne" class="accordion-body collapse in"> 

       <div class="accordion-inner" style="width:83%; border:1px solid #aedddf;background: #f2f9fa;margin-left: 20px;height: 191px;margin-top: -4px;text-align:center;" > 
       </br> 
        <img src="css/style/img/im2/351.png"/> 
        <div class=" chak_1" style="width:82%;border:2px solid #b31a1a;background:#fff;margin: auto;margin-top: 10px;padding: 20px;a"> 
         <input type='checkbox' class="always" name="q1" value="1"onclick="document.getElementById('demo').innerHTML = '<img src=css/style/img/im2/390.png/> &nbsp ut sit veniam nulla laboris elit, cillum in velit. Do, cillum non cupidatat adipisicing eu, officia, id, velit minim ea reprehenderit est cillum. '" id="thing-1" /><label class="" for="thing-1" > </b></label> 

        </div> 
       </div> 
      </div> 

     </div> 


     <!------------------------ 2 -----------------------------------> 


     <div class="accordion-group" style=""> 
      <div class="accordion-heading1 headding_new" style="height:58px;"> 
       <a class="accordion-toggle1 toggle_font" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse"> 
       <div class="accordion-inner" style="width:83%; border:1px solid #aedddf;background: #f2f9fa;margin-left: 20px;height: 191px;margin-top: -4px" style="text-align:center;"> 
        </br> 
        <center> <img src="css/style/img/im2/350.png"/></center> 

        <div class=" chak_1"style="width:82%;border:2px solid #b31a1a;background:#fff;margin: auto;margin-top: 10px;padding: 20px;text-align: center" > 
         <input type='checkbox' class="always2" name="q2" value="2"onclick="document.getElementById('demo').innerHTML = '<img src=css/style/img/im2/390.png/> &nbsp Sit minim fugiat laboris labore ut amet ut. Adipisicing in mollit aliquip ex voluptate ex '" id="thing-2" /><label class="" for="thing-2" > </b></label> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

使用此代碼

<div class="bs-example"> 
     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> 
        </h4> 
       </div> 
       <div id="collapseOne" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> 
        </h4> 
       </div> 
       <div id="collapseTwo" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> 
        </h4> 
       </div> 
       <div id="collapseThree" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>