使用jQuery slideToggle（）而不显示：none？

Question

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

目前我只是隐藏并显示这样的面板，但有些动画会很好：

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

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

有任何想法吗？

Answer 1

slideToggle动画显示有问题元素的高度，而不是可见性。 不确定您是如何使用CSS位置来显示/隐藏面板的。 基于此，您必须使用animate函数构建自己的动画。 另一种快捷方式可能是

用于显示元素：

1. 隐藏元素（使用jquery hide（））

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

3. 现在应用slideDown

隐藏内容：

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

2. 应用你的类来隐藏元素（即调整它在窗口外的位置）

3. 显示元素（使用jquery show（））

编辑 ：说明性代码如下（假设“隐藏”类将执行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();
     });
   }
}

Answer 2

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

如果你只是想让动画工作，你根本不用担心这些类。

所以，只需尝试以下操作即可了解您的结果：

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

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和easing插件你甚至可以为动画添加一些平滑度

这是一个例子

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/