javascript - 在Bootstrap3中，单击按钮使一个div显示而另一个div隐藏

Question

我有两个 div。单击按钮时，我需要第一个 div (topNOnav) 消失并被第二个 div (topnav) 替换。现在我有了它，所以第二个 div 出现在按钮单击上，但我无法让第一个 div 同时消失。第一个 div 只是一些带有按钮的文本，第二个 div 是我们网站的导航栏。

HTML:

<div id="topNOnav" style="background-color:#0568ae" class="collapse in">
    <div class="container">
        <div class="row">
            <div class="col-xs-3" style="padding-left:30px">
                <img src="../../images/NewNav/nav1.jpg" class="img-responsive"/>
            </div><!--end col-xs-3-->
            <div class="col-xs-6" style="text-align:center;font-family:OmnesATTIIMedium;color:white;font-size:18px;margin-top:2%">
                Take yourself to the next level!<br><i>1,000 courses to take you there.</i>
            </div><!--end col-xs-6-->
            <div class="col-xs-3" style="margin-top:2%">
                <button type="button" class="btn btn-primary" data-toggle="collapse" href="#topnav" data-toggle="collapse in">Browse Courses</button>
            </div><!--end col-xs-3-->
        </div><!--end row-->
    </div><!--end container-->
  </div><!--end topNOnav-->


  <div id="topnav" class="collapse">
       <cfinclude template="../../Navigation/Responsive/NDHeader.cfm"/>
  </div>

Answer 1

使用data-parent属性并将div包装在面板中..

<div id="parent">
    <div class="panel">
      <div id="topNOnav" style="background-color:#0568ae" class="collapse in">
        ...
      </div>
      <div id="topnav" class="collapse">
        ...
      </div>
  </div>
</div>

http://www.codeply.com/go/8eo6tQF0TB