javascript - 切换一个 div 在点击时显示，同时切换另一个 div 隐藏

Question

有两个代表相同数据的 div，只有一个显示更多详细信息。单击按钮时，我需要滑动切换第一个 div，然后切换打开或向下滑动第二个。基本上切换显示的内容，但它需要位于两个单独的 div 中，因此它不能是同一 div 中的基本切换。任何想法请:

html: 编辑

<div id="basicTermsRow">
  <div class="row">
    <div class="col-sm-4">
      <div class="standardList">
        <ul>
          <li>Random Data</li>
          <li>This be the div I need to hide<span class="glyphicon glyphicon-cloud"></span></li>
        </ul>
      </div>
    </div>
 </div>
</div>

<div id="expandedTerms">
<div class="row">
  <div class="col-lg-12">
 <p>Good Bye</p>
 </div>

js:

$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle( "fast" );
});

fiddle :

http://jsfiddle.net/ZB8u9/1/

Answer 1

您需要做的第一件事是使展开的 div 最初隐藏。然后，为了实现您想要的效果，您只需在用户按下按钮时切换两个 div 即可。像这样:

<div id="expandedTerms" style="display:none">

不过最好在 CSS 中隐藏以避免内联样式。

脚本将如下所示:

$( "#editButton" ).click(function() {
  $( "#basicTermsRow" ).slideToggle( "fast" );
  $( "#expandedTerms" ).slideToggle( "fast" );
});

http://jsfiddle.net/ZB8u9/3/