Jquery手風琴按鈕切換

我有一張桌子，桌子上有隱藏的行（裏面有一個div），當用戶點擊「編輯用戶」時，這些行就會展開。我一次只顯示其中一行，但是我需要按鈕從「編輯用戶」更新爲「關閉」，但僅限於打開的行。因此，當用戶點擊另一個'編輯用戶'按鈕時，打開的那個按鈕關閉，並且按鈕文本（和跨度圖標）變回它原來的狀態，並且打開的行更新爲「關閉」等。希望我已經說清楚了。Jquery手風琴按鈕切換

我試過使用切換，但我似乎無法弄清楚。我對Jquery非常陌生，現在看來我的技術有點過於先進！

這裏是我的Jquery至今：

$(function() { 
$.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
}; 
    $('tr:nth-child(4n)').addClass("zebra") 
    .prev().addClass("zebra") 
    .prev().addClass("normal") 
    .prev().addClass("normal"); 
    $('.hidden-user').hide() 

$('td .button-small').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var toggledelement = $(this).closest('tr').next().find('.hidden-user');    
    $(toggledelement).slideFadeToggle('slow'); 
    $('.hidden-user').not(toggledelement).slideUp('slow'); 

}); 

});

有一個鏈接到這裏的jsfiddle，我已經包括了大部分的CSS和HTML，我使用的項目。

http://jsfiddle.net/hssay/

來源

2013-08-30 Chris Byrne

$('td .button-small').click(function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var isActive = $(this).hasClass('active'); 
     $(this).toggleClass('active'); 
     if (!isActive) { 
      $(this).find('.label').text('Close'); 
     } else { 
      $(this).find('.label').text('Edit User'); 
     } 
     var toggledelement = $(this).closest('tr').next().find('.hidden-user');    
     $(toggledelement).slideFadeToggle('slow'); 
     $('.hidden-user').not(toggledelement).slideUp('slow'); 

    });

http://jsfiddle.net/hssay/1/ 通過翻轉的活動類，你可以知道，如果下一個DIV是開放與否。

希望這有助於

來源

2013-08-30 13:59:20 Bene

這是偉大的，給了我更多的見識到了什麼，我需要做的 - 但是，我怎麼動態添加活動類和我是什麼將它添加到？我試過使用「：可見」，但它似乎並沒有工作。 –

除了我以前的評論：我發現這是將活動類添加到單擊的按鈕，但是當另一行打開時，它不會將標籤文本更改回「編輯用戶」。 –

那麼我做得非常快，希望你可以自己弄清楚如何做到這一點;）但是繼承人。您只需找到其他活動按鈕並替換文本。所以就在「var isActive = ...」之前加上：$（'。button-small.active'）。text（'Edit User'）。removeClass（'active'）;這應該工作 – Bene

Jquery手風琴按鈕切換

回答

相關問題