0

これは誰かにとってとても簡単なものになるはずです-slideToggle画像がクリックされたときに表示されるテーブル行があります。テーブルは動的であるため、行はいくつでも存在する可能性があるため、クラス名で表示/非表示にする領域を特定する必要がありました。

問題ない。extrainfoただし、一度に表示されるdivのインスタンスは1つだけです。示されているように、すでに表示されているものはすべて非表示にする必要があります。

編集：ここにフィドルがあります：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（下記）が残したコメントに関して編集：

行を切り替えるときは正常に機能しますが、すべての行を非表示にすることはできません。1つの行だけが展開されているかのように、上にスライドしてすぐに下にスライドします。何か案は？

よくわかりませんが、作業が終了すると、これはかなり簡単な外観でしたが、やりすぎかもしれませんが、必要に応じて次のように機能するようです。

$(".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();

あなたがクリックしたリンクまたはdivの直後にextrainfodivがあることがわかっている場合は、次のことができます。

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