1

我有以下列表，我需要能够隐藏所有接受课堂活动时实际关注的内容。

 <Ul>
        <Li>something</li>
          <ul>
           <li>Something</>
           <li>Something</>
          </ul>
        <Li>something</li>
        <Li>something</li>
        <Li>
            <Ul>
                <Li class="active">something</li>
                <Li>omething</li>
            </Ul>
        </li>
        <Li>something</li>
    </Ul>

我需要能够在与活动类的底层不相关的所有 li 上使用 .hide()

结果将是

<Ul>
  <Li>something</li>
  <Li>something</li>
  <Li>something</li>
    <Li>
        <Ul>
            <Li class="active">something</li>
            <Li>omething</li>
        </Ul>
    </li>
  <Li>something</li>
 </Ul>
4

2 回答 2

2

您可以遍历 DOM找到第一级li元素及其兄弟。如果您只有两个级别，则应该可以：

$('li.active').parent().closest('li').siblings().children('ul').hide();

如果你有两个以上的级别，我建议给根ul一个类或 ID：

$('li.active').closest('#root > li').siblings().children('ul').hide();
于 2013-02-04T00:49:58.137 回答
0

$( 'li:not(.active,.active ~ li,.active li,:has(.active))' ).hide();

这将选择所有li元素，但排除（通过使用:not()）：

  1. .active— 活动li元素本身
  2. .active ~ lili—活动元素的li兄弟元素
  3. .active lili—活动元素的li后代元素
  4. has(.active)—li将活动li元素作为其后代的元素

jsfiddle 演示

如果您还想继续显示活动li元素的兄弟姐妹的后代，请添加.active ~ li li到:not()选择器：

$( 'li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();

jsfiddle 演示

跟进 OP 对此答案的第一条评论：

li只需在初始选择器之前添加一个：

$( 'li li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();

jsfiddle 演示

于 2013-02-04T01:54:43.623 回答