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手风琴按钮切换

回答

相关问题