slideDown и slideUp несколько полей с jQuery

Question

Я пытаюсь сместить несколько содержимого вниз с полями показа. Это прекрасно работает. Также класс отлично меняется на «вверх». Тем не менее, когда я снова нажимаю текст, ничего не происходит. Почему это не работает? У кого-то есть лучшее решение?

jQuery('#slidetoggle.down').click(function(e){ 
    jQuery('.slider').slideUp(); 
    jQuery(this).text('show fields'); 
    jQuery(this).toggleClass('down'); 
    jQuery(this).toggleClass('up'); 
}); 
jQuery('#slidetoggle.up').click(function(e){ 
    jQuery('.slider').slideDown(); 
    jQuery(this).text('hide fields'); 
    jQuery(this).toggleClass('up'); 
    jQuery(this).toggleClass('down'); 
}); 

Answer 1

Код типа:

jQuery('some selector') 

говорит, чтобы найти элементы, которые соответствуют 'some selector'прямо сейчас, не следить за элементы, которые могли бы соответствовать селектор в какой-то позже.

Предположительно, ваш элемент имеет только один из классов «вверх» и «вниз», поэтому связан только один из обработчиков кликов.

Вы могли бы сделать это вместо:

jQuery('#slidetoggle').click(function(e){ 
    if ($(this).hasClass('down')) { 
     jQuery('.slider').slideUp(); 
     jQuery(this).text('show fields').toggleClass('down up'); 
    } else { 
     jQuery('.slider').slideDown(); 
     jQuery(this).text('hide fields').toggleClass('up down'); 
    } 
}); 

Демо: http://jsfiddle.net/SBDDx/

Answer 2

Если я geeting вас правильно, то вам также необходимо изменить идентификатор, потому что я полагаю, что вы используете один и тот же кнопку .. Вы меняете текст, но не идентификатор входа ... так что код для другого ID не будет работать

Никогда не нужно писать этот код для одного селектора примерно так

jQuery('#slidetoggle').click(function(e) 
{ 
    var text = (jQuery(this).text() == 'show fields')?'hide field':'show fields'; 
    jQuery('.slider').slideToggle(); 
    jQuery(this).text(text); 
    jQuery(this).toggleClass('down'); 
    jQuery(this).toggleClass('up'); 
}); 

Answer 3

Поскольку элементы .up не существуют при загрузке страницы.

Вы должны сделать это "немного" отличается :)

$('#slidetoggle') 
.on('click', function(e){ 
    var $this = $(this), 
     $slider = $('.slider'), 
     isOpened = $slider.is(':visible'); 

    if (isOpened) 
    { 
     $slider.slideUp(); 
     $this.text('show fields'); 
    } 
    else 
    { 
     $slider.slideDown(); 
     $this.text('hide fields'); 
    } 
}); 

http://jsfiddle.net/qwL33/

Answer 4

Все, что вам нужно сделать, это toggle-

jQuery('#slidetoggle').click(function(e){ 
    jQuery('.slider').toggle('slideUp'); 

});

DEMO

Answer 5

мне удалось получить тот же результат с другой стратегии.

Первоначально скрыть одну из кнопок с дисплеем: none ;. Затем:

jQuery('#slidetoggle.down').click(function(e){ 
    jQuery('.slider').slideUp(); 
    jQuery(this).hide(); 
    jQuery('#slidetoggle.up').show(); 
}); 
jQuery('#slidetoggle.up').click(function(e){ 
    jQuery('.slider').slideDown(); 
    jQuery(this).hide(); 
    jQuery('#slidetoggle.down').show(); 
});