2016-02-20 471 views
0

我的目标是有2个单选按钮,每个按钮都会折叠一个面板。HTML单选按钮折叠和滑动

但是,单选按钮不检查我是否点击它们我猜这是因为data-toggle="collapse"?我如何强制它崩溃并检查?

<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">panel 1 
      <br> 
     <input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> panel 2 

      <div class="panel-heading"> 
       <div id="collapseTwo" class="panel-collapse collapse"> 
        <div class="panel-body"> 
         you are now in body of panel1 
         </div> 
         </div> 
         </div> 




      <div class="panel-heading"> 
       <div id="collapseThree" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          you are now in body of panel 2 
        </div> 
        </div> 
       </div> 
+2

这里是JavaScript? – kanudo

+1

一个可行的例子会很棒! –

+0

试图让这个问题有些意义,但它仍然很不清楚。包括你尝试过的JavaScript会非常有帮助。 –

回答

0

尝试用这个下面的代码,它可以帮助你

<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.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="panel1">panel 1 <br> 
 
<input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="panel2"> panel 2 
 
<div class="panel-heading" id="collapse1" class="panel1"> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
    <div class="panel-body"> 
 
     you are now in body of panel1 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="panel-heading" id="panel2" class="collapse"> 
 
    <div id="collapseThree" class="panel-collapse collapse"> 
 
    <div class="panel-body"> 
 
     you are now in body of panel 2 
 
    </div> 
 
    </div> 
 
</div>