0

ここにページがあります: http://nm-bootstrap.gydev.com/course-delivery.php

タイトル行のシェブロン トグル アイコンとブックマーク アイコンの両方が最初の行の先頭に追加されます。th を持つ tr がクリックされた場合に次の行を切り替えるための js がいくつか用意されています。

問題は、そのブックマーク ( <a>「bookmark-this」のクラスを持つもの) をイベントから除外する必要があることです。これは、誰かが下の行を切り替えずにセクション全体をブックマークできるようにする必要があるためです。したがって、ブックマークを除く行全体がイベントをトリガーする必要があります。

これが機能するjQueryです

$("#table-modules tbody tr:not(.section-title)").hide();

$("#table-modules tbody tr.section-title").click(function(){
    $(this).nextUntil('tr.section-title').toggle().end()
        .find('.icon-chevron-right').toggle().end()
        .find('.icon-chevron-down').toggle();
});

$(".bookmark-this").click(function(){
    $(this).find('.icon-bookmark-empty').toggle().end()
        .find('.icon-bookmark').toggle();
});

レンダリングされた html の最初の 2 行を次に示します。

<tr class="section-title" style="cursor: pointer; ">
<th><i class="icon-chevron-right grayLight"></i><i class="icon-chevron-down grayLight" style="display: none; "></i><a class="bookmark-this"><i class="icon-bookmark-empty grayLight"></i><i class="icon-bookmark red" style="display: none; "></i></a>1. Introduction</th>
<th>&nbsp;</th>
<th>11:53</th>
</tr>
<tr style="display: none; ">
<td style="padding-left: 45px; "><a class="bookmark-this"><i class="icon-bookmark-empty grayLight"></i><i class="icon-bookmark red" style="display: none; "></i></a><a href="#">How to take an online course</a></td>
<td><img src="/img/icons/check-sm.png" width="16" height="13" alt="yes"></td>
<td>6:32</td>
</tr>

これについてどうすればいいですか？

4

2 に答える 2

2

stopPropagationのクリックハンドラに追加してみてください.bookmark-this

$(".bookmark-this").click(function(e){ e.stopPropagation() });
于 2012-08-01T15:31:13.400 に答える
1

notセレクターを使用できます

$("#table-modules tbody tr.section-title:not(.bookmark-this)").click
于 2012-08-01T15:32:09.770 に答える