jQuery 切换 div 可见性答案

【问题标题】：jQuery toggling div visibilityjQuery 切换 div 可见性
【发布时间】：2010-03-17 23:58:16
【问题描述】：

我有一个具有以下设置的 HTML 文档：

<div class="main-div" style="padding: 5px; border: 1px solid green;">

    <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple">
      First Div
      <a href="#" class="control">Control</a>
    </div>
    <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;">
      Second Div
      <a href="#" class="control">Control</a>

    </div>

  </div>

我还有一个名为 hidden 的 CSS 类设置，显示设置为无。

我有这样的 jQuery 设置：

$('.control').click(function(){

    var master = $(this).parent().parent();
    var first_div = $(master).find(".first-div");
    var second_div = $(master).find(".second-div");

    $(first_div).toggleClass("hidden")
    $(second_div).toggleClass("hidden")

  });

此设置切换 div 的可见性，单击它隐藏一个 div 并显示另一个 div 的控制按钮。

不过，这只是在瞬间隐藏和显示每个 div。我希望为 div 的过渡添加一些动画，当单击“控件”时，可能有一个向上滑动，另一个向下滑动，反之亦然，但我无法实现这一点。

有人可以帮忙并就如何做到这一点提供一些建议吗？

欢呼

伊夫

【问题讨论】：

标签： jquery hide toggle show

【解决方案1】：

我建议您使用jQuery Effects 淡化/滑动/炫耀您的元素进出视图，而不是使用 jQuery 来修改元素的类并依靠 CSS 来隐藏它们。

【讨论】：

【解决方案2】：

您所描述的被称为手风琴。如果您想使用jQuery UI，则内置了对手风琴的支持。在网站上查看accordion demo。您可以下载该库并查看它是如何工作的。如果您想自己尝试，它将让您了解如何实现此类功能。

【讨论】：