JQuery - 同时 SlideToggle 多个 DIV？答案

【问题标题】：JQuery - SlideToggle Multiple DIVs at the same time?JQuery - 同时 SlideToggle 多个 DIV？
【发布时间】：2010-02-03 00:30:07
【问题描述】：

我是 JQuery 的新手，我有一点强迫症问题。

我正在使用具有单击功能的 SlideToggle 来隐藏/显示容器 div。但是它里面的 div 并没有随着它滑动，它只是出现了。

有没有办法让两个 DIV 一起滑入？

查询：

<script type="text/javascript">
$(document).ready(function(){
$("#store_container").hide();
  $('#toggle').click(function(){
     $('#store_container').slideToggle("slow"); 
     return false;
  });
});
</script>

HTML：

<div id="store_container" style="display:none;">
    <div id="store_data">
        <p>THIS IS A TEST</p>
        </div>
</div>

【问题讨论】：

这对我有用（在 webkit 中）。您使用的是哪个浏览器？这是您使用的确切代码吗？它有一些CSS吗？

标签： jquery toggle html slidetoggle

【解决方案1】：

试试这个：

<script type="text/javascript">
$(function(){
  $("#store_container").hide();
  $('#toggle').toggle(function(){
     $('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
   }, function() {
     $('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
  });
});
</script>
  <div id="store_container" style="display:none; height: 300px;">
      <div id="store_data" style="display:none;">
        <p>THIS IS A TEST</p>
       </div>
  </div>

【讨论】：

这不起作用，一旦#store_container 滑出，#store_data 基本上就消失了。很奇怪。
这实际上阻止了#store_data 的消失.. 但是还是没有让两个DIVS一起滑下来，只有一个..
@iamtheratio - 已更新，尽管您的原始示例在 FireFox 中对我有用....试试我当前的答案。
@iamtheratio - 您使用的是哪个浏览器？我在这里看到你的原始代码都在下滑...需要看看你的效果。
@nick 这工作没有错误，但奇怪的是，一旦我单击#toggle，#store_data 立即出现，然后#store_container 向下滑动.. 这看起来很糟糕。