0

私は現在、この構造を持っています：

<ul id="topic_categories">
    <li><a href="">Type 1</a></li>
    <li><a href="">Type 2</a></li>
    <li><a href="">Type 3</a>
        <ul class="sub_topic_categories">
            <li><a class="tooltip" href="">A</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">B</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">C</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">D</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">E</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">F</a><a href=""><img src=""></a></li>
            <li class="active"><a class="tooltip" href="">G</a><a href=""><img src=""></a></li>
        </ul>
    </li>
    <li class="active"><a href="">Type4</a>
        <ul class="sub_topic_categories">
            <li><a class="tooltip" href="">A</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">B</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">C</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">D</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">E</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">F</a><a href=""><img src=""></a></li>
            <li class="active"><a class="tooltip" href="">G</a><a href=""><img src=""></a></li>
        </ul>
    </li>
</ul>

基本的に私がやりたいことは次のとおりです。

  1. firstli a内の最初の要素ULがクリックされます。のクラスがactiveリスト要素に追加されます。私はこれまでこれを使ってきました$(this).parents('li').addClass("active");

  2. アクティブなリスト要素に応じて、次UL sub_topic_categoryが表示されます（CSSを介してこれを実行しましたが、機能します）。

  3. これは私が立ち往生している部分です。sub_topic_categoryここで、表示された変更クラス内のリスト要素のみを作成する必要があります。1 つのリスト要素aタグがクリックされると、クリックされたリンクの親にクラスactiveが追加され、前のクラスはそのサブ トピック リスト内でのみ削除されます。liactive

たとえば、表示されているコードType4では、最初の 内でアクティブに設定していますUL。2 番目のリストはsub_topic_categories、ハードコーディングされた HTML によってアクティブに設定された最初のリスト要素 (ブラウザーに表示される) とともに表示されます。私が言うと、リスト要素から削除してから追加しAたいをクリックします。これは、このリストにのみ影響する必要があります。activeGAsub_topic_category

これでうまく説明できたと思います。現時点で私が持っている

$('#topic_categories li ul.sub_topic_categories li.active').removeClass('active');

Type3これは機能しますが、 sub_topic_categories リストにあるアクティブな要素も削除します。

どんな助けでも大歓迎です。

4

1 に答える 1

1

A-をクリックするとこれが必要になります

$(this).closest('ul').find('li.active').removeClass('active');
$(this).closest('li').addClass('active')

デモ-------> http://jsfiddle.net/NrGGz/

于 2013-06-21T15:14:36.870 に答える