Bootstrap 3 collapse「data-parent」not working

Question

我嘗試使用Bootstrap 3 collapse函數來設計一個表來顯示兩個不同的HTML表單。有一個問題，如果我單擊form1，form1可以正確顯示，但如果我單擊form2，form2將顯示在form1下。

我想在打開form2時，form1會關閉並只顯示form2.我嘗試使用data-parent，但它仍然不起作用。

我用下面的HTML代碼：

<div id="myAccordion" > 
       <table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail" > 
        <tbody> 
        <tr> 
         <td width=50%><button type="button" class="btn btn-info btn-lg" data-toggle="collapse" data-target="#form1" data-parent="#myAccordion">form1</button></td> 
         <td width=50%><button type="button" class="btn btn-primary btn-lg" data-toggle="collapse" data-target="#form2" data-parent="#myAccordion">form2</button></td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <div id="form1" class="collapse"> 
          . <form method="POST" novalidate="novalidate"> 
           <div class="form-group"> 
            <label for="number1" class="control-label ">number1</label> 
            <input type="text" class="form-control" id="number1" name="number1" > 
            <span class="help-block"></span> 
           </div> 
           <div class="form-group"> 
            <label for="number2" class="control-label ">number2</label> 
            <input type="text" class="form-control" id="number2" name="number2" > 
            <span class="help-block"></span> 
           </div> 
           <div class="form-group"> 
            <label for="number3" class="control-label ">number3</label> 
            <input type="text" class="form-control" id="number3" name="number3" > 
            <span class="help-block"></span> 
           </div> 
           <button type="submit" class="btn btn-success btn-block">submit</button> 
          </form> 
         </div> 
          <div id="form2" class="collapse"> 
           . <form method="POST" novalidate="novalidate"> 
            <div class="form-group"> 
             <label for="newinfo" class="control-label ">info</label> 
             <textarea class="form-control" rows="3" id="newinfo" name="newinfo"> </textarea> 
             <span class="help-block"></span> 
            </div> 
            <button type="submit" class="btn btn-success btn-block">submit</button> 
           </form> 
          </div> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
      </div> 

在我的代碼什麼問題？

Answer 1

利用bootstrap給出的javascript方法，對代碼做了很少的修改。

HTML

<div id="myAccordion" > 
      <table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail" > 
       <tbody> 
       <tr> 
        <td width=50%><button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion" id="form1btn">form1</button></td> 
        <td width=50%><button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" id="form2btn">form2</button></td> 
       </tr> 
       <tr> 
        <td colspan="2"> 
         <div id="form1" class="collapse"> 
         . <form method="POST" novalidate="novalidate"> 
          <div class="form-group"> 
           <label for="number1" class="control-label ">number1</label> 
           <input type="text" class="form-control" id="number1" name="number1" > 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="number2" class="control-label ">number2</label> 
           <input type="text" class="form-control" id="number2" name="number2" > 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="number3" class="control-label ">number3</label> 
           <input type="text" class="form-control" id="number3" name="number3" > 
           <span class="help-block"></span> 
          </div> 
          <button type="submit" class="btn btn-success btn-block">submit</button> 
         </form> 
        </div> 
         <div id="form2" class="collapse"> 
          . <form method="POST" novalidate="novalidate"> 
           <div class="form-group"> 
            <label for="newinfo" class="control-label ">info</label> 
            <textarea class="form-control" rows="3" id="newinfo" name="newinfo"> </textarea> 
            <span class="help-block"></span> 
           </div> 
           <button type="submit" class="btn btn-success btn-block">submit</button> 
          </form> 
         </div> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 

下面是JavaScript

$('#form1btn').click(function(){ 
$('#form1').collapse('show'); 
if ($('#form2').is(':visible')) 
$('#form2').collapse('hide'); 
}); 
$('#form2btn').click(function(){ 
$('#form2').collapse('show'); 
    if ($('#form1').is(':visible')) 
$('#form1').collapse('hide'); 
});  

在這裏找到它..

http://jsfiddle.net/mawd59e3/2/

Answer 2

您可以使用引導程序下拉菜單。

HTML ------------

<nav class="my_style navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

CSS ----------

.my_style .navbar-nav>li>.dropdown-menu{ 
    position:relative; 
} 

您可以訪問這個bootplay演示。