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的多個字段

回答

相關問題