使用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/