2

私は次のコードを持っています:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $("#ThisClick").anycommand();
    </script>
</head>
<body>
<ul id="TopUl">
    <li>First<ul>
        <li>One<ul>
            <li>liA1</li>
            <li>liA2</li>
        </ul>
        </li>
        <li>Two<ul>
            <li id="ThisClick">liB1</li>
            <li>liB2</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>Second<ul>
        <li>li1<ul>
            <li>liF1</li>
            <li>liF2</li>
        </ul>
        </li>
        <li>li2</li>
    </ul>
    </li>
</ul>
</body>
</html>

クリック時に、liB1 (#ThisClick) の親ではないすべての UL を折りたたむ必要があります。つまり、liB1 をクリックすると、次のコードが必要になります。

<ul id="TopUl">
    <li>First<ul>
        <li>One<ul style="display:none">
            <li>liA1</li>
            <li>liA2</li>
        </ul>
        </li>
        <li>Two<ul>
            <li id="ThisClick">liB1</li>
            <li>liB2</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>Second<ul style="display:none">
        <li>li1<ul style="display:none">
            <li>liF1</li>
            <li>liF2</li>
        </ul>
        </li>
        <li>li2</li>
    </ul>
    </li>
</ul>

次に、Jquery は、親ではない UL タグをすべて折りたたむことがあります。解決策は何ですか？このプロポーズはどうすればいいですか？

4

1 に答える 1

1

この厄介なセレクターは機能するはずです。

$("ul :not(:has(#ThisClick))").hide();

参考文献：:not()と:has()

したがって、このコードは、クリックした要素の親ではないすべての要素を非表示にします。必要に応じて最初のセレクター ( $("#ThisClick")) を変更します。現時点では<li>、ID を指定した でのみ機能しThisClick、ID は 1 回しか使用できません。

$("#ThisClick").click(function() {
    $("ul :not(:has(this))").hide();
});

にあるすべて <li>の でこれを機能させるには、次の<ul>ようにします。

$("#TopUl li").click(function() {
    $("ul :not(:has(this))").hide();
});

これにより、クリック イベントがリスト内のすべて<li>の に追加されます。

于 2012-04-24T01:47:10.577 に答える