1

我有一个表，当用户单击“编辑用户”时，表中有隐藏的行（里面有一个 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/

4

1 回答 1

0 
$('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-30T13:59:20.517 回答