不使用display:none如何使用jQuery的slideToggle()函数？

Question

我正在尝试使用jQuery的slideToggle函数来显示或隐藏一个面板，该面板已经被隐藏在CSS位置中，而不是display:none（因为这会导致我的某些面板中的Google地图出现问题）。

目前，我只是像这样隐藏和显示面板，但是一些动画效果会更好：

$('.panel').addClass('hidden');
$('.head > span').addClass('closed');

$('.head').click(function() { 
    $(this).next('.panel').toggleClass('hidden');
    $(this).children('span').toggleClass('open');
});

有什么想法吗？

- Pezholio

Answer 1

slideToggle能够动画化元素的高度，而不是改变其可见性。不确定您如何使用CSS定位来显示/隐藏您的面板。根据这一点，您可以使用animate函数构建自己的动画效果。另一个快速的方法可能是：

显示元素：

1. 隐藏该元素（使用jQuery hide()）

2. 应用您的类以显示元素 （即调整其位置）

3. 现在应用slideDown

隐藏内容：

1. 应用slideUp - 使用回调函数执行步骤2和3

2. 应用您的类以隐藏元素 （即调整其位置到窗口之外）

3. 显示元素（使用jQuery show()）

编辑：以下是说明性代码（假设“hidden”类将实现CSS定位来隐藏元素）：

function customSlideToggle(e)
{
   var show = e.hasClass('hidden');
   if (show) {
     e.hide();
     e.removeClass('hidden')
     e.slideDown('slow');
   }
   else
   {
     e.slideUp('slow', function() {
        e.addclass('hidden');
        e.show();
     });
   }
}

- VinayC

---

正是我所需要的。不过示例中有一个小错误：e.addclass('hidden'); 应该是：e.addClass('hidden'); - Jonas Jongejan

Answer 2

slideToggle() 是 toggle() 的替代品，根据当前的可见状态显示/隐藏选定的项目。

如果您只是想让动画工作，那么您不需要担心类。

所以，只需尝试以下内容，看看您会得到什么：

$(this).next('.panel').slideToggle();

- James Wiseman

---

我相信，如果OP已经使用CSS定位来隐藏元素，slideToggle将无法正常工作。 - VinayC

SlideToggle是一个非常酷的jQuery函数，我和詹姆斯一样喜欢它。我在詹姆斯给出的指令上加了停止指令：$(this).next('.panel').stop(true,true.)slideToggle(); 以便管理用户的冲动点击。 - Marcello Faga

@VinayC：我认为你的警告是正确的，有些CSS属性与slidetoggle函数不兼容，比如隐藏和控制尺寸。如果在滑动面板中设置height:100%，这个值将会严重破坏滑动效果。 - Marcello Faga

Answer 3

试试这个 Pezholio

 $('.head').click(function() {
    $(this).next('.panel').slideToggle('slow', function() {
        $(this).toggleClass('hidden')
    });
    $(this).children('span').slideToggle('slow', function() {
        $(this).toggleClass('open')
    });
});​

你可以结合几个效果slideUP、slideDown、slideToggle，并使用缓动插件使动画更加平滑。

这里有一个例子：

HTML

<p class="text">
    test one<br />
    test one<br />
    test one<br />
    test one<br />
    test one<br />

</p>
<span class="more">show</span>​

JavaScript

$(document).ready(function() {
    $('span.more').click(function() {
        $('p:eq(0)').slideToggle();
        $(this).hide();
    });
});​

CSS

.text{display:none}

实时演示

http://jsfiddle.net/gB6np/

- Pramendra Gupta