0

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

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

编辑：这是一个小提琴：http: //jsfiddle.net/shpsD/

在下面添加了 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>
4

2 回答 2

4

首先隐藏元素：

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

如果需要，您也可以使用:visible选择器，尽管它不一定会使事情变得更快，但也许更容易理解：

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

然后显示：

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

JS 小提琴演示。

编辑关于 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 小提琴演示。

（我会在吃完后添加参考资料并回答更多问题……对不起！）

参考：

于 2012-10-15T14:35:31.860 回答
0

首先你可以这样做：

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

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

如果您知道 extrainfo div 就在您单击的链接或 div 之后，您可以执行以下操作：

$(this).next('.extrainfo').show()
于 2012-10-15T14:37:49.567 回答