jQuery 使用 wrapInner 向下滑动，然后在完成后移除答案

【问题标题】：jQuery slidedown using wrapInner then remove after finishedjQuery 使用 wrapInner 向下滑动，然后在完成后移除
【发布时间】：2013-08-08 18:16:29
【问题描述】：

在 jquery 中使用上滑/下滑功能时，我遇到了 Firefox 错误 (overflow property not implemented on fieldset)。

所以我想：

点击时通过 jquery 添加内部 div
向上/向下滑动此 div
删除内部 div

这是我目前所拥有的：

var $searchBtn = $form.find('.search-reveal');          
$searchBtn.click(function(e){               
    var $this = $(this),
        $fieldset = $this.next();

    $this.toggleClass('open');

    // FIX Firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=261037
    var $fieldsetInner = $fieldset.children().eq(0)
    if(!$fieldsetInner.is("div")){
        $fieldsetInner = $fieldset.innerWrap("<div></div>");
    }

    if($this.hasClass('open')){
        $fieldset.addClass('open');
        $form.addClass('active');
        $fieldsetInner.slideDown('fast', 'easeInQuad', function(){
            // REMOVE Firefox bug fix
        });
    } else {
        $fieldsetInner.slideUp('fast', 'easeOutQuad', function(){
            $fieldset.removeClass('open');
            $form.removeClass('active');
            // REMOVE Firefox bug fix
        });
    }

    e.preventDefault();
});

我尝试过this 建议使用display: table-column 进行修复，但这没有任何区别。

【问题讨论】：

也请分享HTML 代码，如果您可以为您的问题创建一个 JSFiddle 也很好。
支持，因为我不知道这个错误。激励我完成你的解决方案。看看吧！
我更新了我的函数，所以'fast' 不再被硬编码到函数中。

标签： jquery firefox cross-browser fieldset

【解决方案1】：

为此我编写了一个独立的 jQuery 函数：

$.fn.fieldsetSlideToggle = function (speed) {
    var $this = $(this),
        $inner = $this.children().eq(0),
        display = $this.css('display'),
        slideSpeed = speed ? speed : 'fast';

    // 1. Check if first child of fieldset is <div>
    // 2. Wrap contents in <div> if not
    if (!$inner.is("div")) {
        $inner = $('<div />').html($this.html());
        $this.empty().append($inner);
    }

    // 3. SlideToggle on div
    if (display == 'none') {
        $this.show();
        $inner.hide().slideDown(slideSpeed, function () {
            $this.html($inner.html());
        });
    } else {
        $inner.slideUp(slideSpeed, function () {
            $this.html($inner.html()).hide();
        });
    }
}

小提琴：http://jsfiddle.net/tbDRu/6/。单击按钮以向上/向下滑动字段集。

【讨论】：