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>您指定ThisClickID 的那个，并且您只能使用一次 ID。

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

要在您的 s 中的所有 <li>s 上进行此<ul>操作，您可以执行以下操作：

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

这会将 click 事件添加到<li>列表中的所有 s 中。

于 2012-04-24T01:47:10.577 回答