Скольжение jQuery с использованием wrapInner, а затем удалить после завершения

Я столкнулся с ошибкой Firefox (свойство переполнения не реализовано в наборе полей) при использовании функция слайда вверх/вниз в jquery.

Итак, я хочу:

  1. добавить внутренний div через jquery по клику
  2. сдвиньте этот div вверх/вниз
  3. удалить внутренний 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();
});

Я пробовал это предложить исправить с помощью display: table-column, но это не имело значения.


jquery firefox fieldset cross-browser
person John Magnolia    schedule 04.08.2013    source источник
comment
Пожалуйста, поделитесь кодом HTML, также было бы хорошо, если бы вы могли создать JSFiddle для своей проблемы.   -  person Aditya Singh    schedule 07.08.2013
comment
Проголосуйте, потому что я не знал об этой ошибке. Побудил меня закончить ваше решение. Проверьте это!   -  person Nicklas Nygren    schedule 07.08.2013
comment
Я обновил свою функцию, чтобы 'fast' больше не было жестко закодировано в функцию.   -  person Nicklas Nygren    schedule 08.08.2013

Ответы (1)


arrow_upward
2
arrow_downward

Для этого я написал отдельную функцию 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/. Нажмите на кнопку, чтобы скользить вверх/вниз по набору полей.

person Nicklas Nygren    schedule 07.08.2013