当孩子可见时如何将课程添加到父课程？

Question

我有一个带子菜单的菜单，当子菜单可见时，我想将一个类添加到父列表元素。

<ul class="upper-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="parent-li">Item 3
    <ul class="lower-menu">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>Item 4</li>
</ul>

基本上，当“下层菜单”可见时，我想在列表元素“parent-li”中添加另一个类。此外，当下层菜单不可见时，我想从“parent-li”中删除该类。这可能在JQuery中吗？

谢谢

Answer 1

您可以通过以下jquery脚本来完成

if($('.lower-menu').is(':visible')){
    $(this).parent().addClass("YourClass");
 } 

Answer 2

您可以通过:visible伪类选择所需的元素，然后将您的类分配给其父级：

$(".lower-menu:visible").closest('.parent-li').addClass("test");

.test {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="upper-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="parent-li">Item 3
    <ul class="lower-menu">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
  <li>Item 4</li>
</ul>