slideDown和slideUp与jQuery的多个字段

我试图滑动显示字段的多个内容。这工作正常。这个班也很好地改变为“上”。然而，当我再次点击文本时，什么也没有发生。为什么不能工作？有没有人有更好的解决方案？slideDown和slideUp与jQuery的多个字段

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'); 
});

来源

2013-03-22 Iwe M

这样的代码：

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/

来源

2013-03-22 10:57:21 nnnnnn

如果我geeting您正确，那么你还需要更改ID，因为我想你使用的是相同的键..你正在改变文本，但不是输入的ID ...所以其他ID的代码将不起作用

Neverthless你需要写这个代码的一个选择器是这样的

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'); 
});

来源

2013-03-22 11:03:27 alwaysLearn

因为.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/

来源

2013-03-22 11:13:43 griffla

所有你需要做的是肘节

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

}）;

DEMO

来源

2013-03-22 11:22:27 Razor

我设法用不同的策略相同的结果。

最初用display：none;隐藏其中一个按钮。 Then：

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(); 
});

来源

2013-03-22 12:48:38

slideDown和slideUp与jQuery的多个字段

回答

相关问题