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函数构建自己的动画。另一种快捷方式可能是

显示元素：

隐藏元素（使用jquery hide（））
将您的课程应用于展示元素（即调整其位置）
现在应用slideDown

隐藏内容：

应用slideUp - 使用回调函数执行步骤2＆amp; 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 ，并使用缓动插件，你甚至可以为动画添加一些平滑度

以下是

的示例

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/

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

3 个答案: