Question

我有这个嵌套列表：

<ul>
  <li>Item 1
    <ul>
      <li>Item 1A</li>
      <li>Item 1B</li>
      <li>Item 1C</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li>Item 2A</li>
      <li class="active">Item 2B</li>
      <li>Item 2C</li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li>Item 3A</li>
      <li>Item 3B</li>
      <li>Item 3C</li>
    </ul>
  </li>
</ul>

我需要的是：当我将鼠标悬停在带有class="active"的列表项上时，此特定项“项2B”及其父项“项2”将变为红色。 “ <项目2A”和“项目2C”应不着色。

我尝试了closest()：

$("li").on("mouseenter", function () {
    if ($(this).hasClass("active")) {
        $(this).css("color", "red");
        $(this).closest("ul").closest("li").css("color", "red");
    }
});

也parent().parent()：

$(this).parent().parent().css("color", "red");

但是它们当然都为整个“项目2”列表项着色，包括所有子项2A，2B和2C

Answer 1

您必须将每个父元素包装到div或span之类的html元素中。

Solution

HTML

 <ul>
              <li>Item 1
                  <ul>
                  <li>Item 1A</li>
                  <li>Item 1B</li>
                  <li>Item 1C</li>
                  </ul>
              </li>
              <li><span>Item 2</span>  
                  <ul>
                      <li>Item 2A</li>
                      <li class="active">Item 2B</li>
                      <li>Item 2C</li>
                  </ul>
              </li>
              <li>Item 3
                  <ul>
                  <li>Item 3A</li>
                  <li>Item 3B</li>
                  <li>Item 3C</li>
                  </ul>              
              </li>
    </ul>

JS

$("li").on("mouseenter", function () {

        if ($(this).hasClass("active")) {

            $(this).css("color", "red");
            $(this).parent().parent().find("span").css("color", "red");
        }          
    });

Answer 2

要执行此操作，您需要将Item 2文本包装在包含元素（例如span）中，否则所有子元素的颜色也会更改。

然后，您可以使用.parent.closest('li')来获取li，然后再使用children()来获取该span。试试这个：

$("ul").on("mouseenter mouseleave", 'li.active', function(e) {
  var $target = $(this).parent().closest('li').children('span');
  $target.add(this).toggleClass('hover', e.type == 'mouseenter');
});

.active {
  font-weight: bold;
}

.hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Item 1</span>
    <ul>
      <li>Item 1A</li>
      <li>Item 1B</li>
      <li>Item 1C</li>
    </ul>
  </li>
  <li>
    <span>Item 2</span>
    <ul>
      <li>Item 2A</li>
      <li class="active">Item 2B</li>
      <li>Item 2C</li>
    </ul>
  </li>
  <li>
    <span>Item 3</span>
    <ul>
      <li>Item 3A</li>
      <li>Item 3B</li>
      <li>Item 3C</li>
    </ul>
  </li>
</ul>

请注意，在调用parent()之前需要进行closest()调用，因为closest()将匹配当前不需要的当前li元素，因此parent()需要“跳过”该元素。

Answer 3

我可能会这样做：

为:hover本身使用标准li规则
为其父级li使用类而不是直接样式
使用CSS中的类重新声明ul下的下级li元素（及其子元素）的颜色

赞：

$("li")
  .on("mouseenter", function() {
    if ($(this).hasClass("active")) {
      $(this).parent().closest("li").addClass("has-active");
    }
  })
  .on("mouseleave", function() {
    if ($(this).hasClass("active")) {
      $(this).parent().closest("li").removeClass("has-active");
    }
  });

li {
  color: black;
}

li.has-active {
  color: red;
}

li.active:hover {
  color: red;
}

.has-active ul {
  color: black;
}

<ul>
  <li>Item 1
    <ul>
      <li>Item 1A</li>
      <li>Item 1B</li>
      <li>Item 1C</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li>Item 2A</li>
      <li class="active">Item 2B</li>
      <li>Item 2C</li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li>Item 3A</li>
      <li>Item 3B</li>
      <li>Item 3C</li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在jQuery的嵌套列表中选择没有子项的父项列表项

3 个答案: