Question

我的目标是拥有2个单选按钮，每个按钮都会折叠一个面板。

然而，单选按钮不会检查我是否点击它们我猜是因为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>

Answer 1

尝试使用以下代码，它可以帮助您

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

HTML单选按钮折叠和滑动

1 个答案: