Question

我有一张桌子，在桌子上有隐藏的行（里面有一个div），当用户点击“编辑用户”时会扩展。我让它一次只显示其中一行，但我需要按钮更新，从'编辑用户'到'关闭'，但仅限于打开的行。因此，当用户点击另一个“编辑用户”按钮时，打开的按钮关闭，按钮文本（和跨度图标）更改回原来的状态，打开的行更新为“关闭”等希望我已经说清楚了。

我尝试使用切换但我似乎无法弄明白。我对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/

Answer 1

$('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是否打开。

希望这有帮助

Jquery手风琴按钮切换

1 个答案: