Question

对于某人来说，这应该是一个非常简单的方法 - 当点击图像时，我有一个slideToggle的表行。由于表是动态的，因此可能有任意数量的行，因此我必须通过类名来标识要显示/隐藏的区域。

不是问题。但是，我只能同时显示extrainfo div的一个实例。如图所示，任何已经可见的应隐藏：

在下方添加了HTML。

    var toggleSpeed = 300;
    var expandImg = "../Images/expand.png";
    var collapseImg = "../Images/collapse.png";
    $(".moreless").click(function () {
        var detailsRow = $(this).parent().parent().next();
        detailsRow.find('.extrainfo').slideToggle(toggleSpeed);
        if ($(this).attr('src') == collapseImg) {
            $(this).attr('src',expandImg);
            $(this).closest('tr').removeClass('highlight_row');
        }
        else {
            $(this).attr('src',collapseImg);
            $(this).closest('tr').addClass('highlight_row');
        }
    });
});

-

<table>
    <tr>
        <th>Header</th>
        <th></th>
    </tr>
    <tr>
        <td>row 1</td>
        <td><img src="expand.png" class="moreless" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="extrainfo">
                EXTRA INFO!!
            </div>
        </td>
    </tr>    
    <tr>
        <td>row 2</td>
        <td><img src="expand.png" class="moreless" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="extrainfo">
                EXTRA INFO!!
            </div>
        </td>
    </tr>
</table>

Answer 1

首先隐藏元素：

$('table .extrainfo').slideUp();

如果你愿意，你也可以使用:visible选择器，虽然它不一定能让事情变得更快，但可能更容易理解：

$('table .extrainfo:visible').slideUp();

然后显示：

detailsRow.find('.extrainfo').slideDown();

JS Fiddle demo

已编辑关于OP留下的评论（下方）：

在行之间切换时工作正常，但无法隐藏所有行，就像只展开一行一样，它会向上滑动然后立即向下。有任何想法吗？

我不确定，一旦我完成工作，这是一个非常快速的外观，但我可能过度做事，但以下似乎可以按照您的要求工作：

$(".moreless").click(function() {
    // caching variables:
    var that = $(this),
        table = that.closest('table'),
        row = that.closest('tr'),
        visInfo = table.find('.extrainfo:visible').length,
        extrainfo = row.next().find('.extrainfo');

    // I suspect this conditional is flawed, and redundant,
    // but essentially if there's already a visible element *and*
    // the next '.extrainfo' element in the next row is visible,
    // then we're having to toggle/close
    if (visInfo == 1 && extrainfo.is(':visible')) {
        // we're working on the row that's already visible:
        extrainfo.slideToggle(toggleSpeed);
        row.toggleClass('highlight_row');
    }
    else {
        // not toggling the same table-row, so tidying up previously
        // visible elements (if any)/removing 'highlight_row' class
        // and also setting the src of the image to the expandImg
        var highlighted = table.find('.highlight_row');
        highlighted.find('.moreless').attr('src',expandImg);
        highlighted.removeClass('highlight_row');
        table.find('.extrainfo').slideUp(toggleSpeed);

        // now we're showing stuff/adding the class
        extrainfo.slideDown(toggleSpeed);
        row.addClass('highlight_row');
    }
    // this effectively toggles the src of the clicked image:
    that.attr('src', function(i,v) {
        return v == expandImg ? collapseImg : expandImg;
    });
});

JS Fiddle demo

（一旦我吃完，我会添加参考文献并回答其他问题......对不起！）

参考文献：

Answer 2

首先你可以做到：

$('.extrainfo').hide();

然后，一旦每个extrainfo分类隐藏，您可以继续执行：$(this).closest('.extrainfo').show();

如果你知道extrainfo div就在你点击的链接或div之后，你可以这样做：

$(this).next('.extrainfo').show()

在jQuery中显示另一个时，按类名隐藏可见元素

2 个答案: