有两个代表相同数据的 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 :
最佳答案
您需要做的第一件事是使展开的 div 最初隐藏。然后,为了实现您想要的效果,您只需在用户按下按钮时切换两个 div 即可。像这样:
<div id="expandedTerms" style="display:none">
不过最好在 CSS 中隐藏以避免内联样式。
脚本将如下所示:
$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle( "fast" );
$( "#expandedTerms" ).slideToggle( "fast" );
});
关于javascript - 切换一个 div 在点击时显示,同时切换另一个 div 隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21236195/