mouseleave 问题上的 jQuery 嵌套悬停事件 removeClass（）-解网

问：

我有一个嵌套列表，如下所示：

<ul class="menu-wrapper">
    <li>
        <a href="#">Menu item</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Subitem-1</a>
                <ul>
                <li>Sub-Subitem-1</li>
                <li>Sub-Subitem-2</li>
                <li>Sub-Subitem-3</li>
                </ul>
            </li>
            <li>
                <a href="#">Subitem-2</a>
                <ul>
                <li>Sub-Subitem-1</li>
                <li>Sub-Subitem-2</li>
                <li>Sub-Subitem-3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

将鼠标悬停在项目上时，将一个类应用于子菜单列表中的第一个和第一个项目：ul.menu-wrapper > li.activeul.sub-menuli

$('ul.menu-wrapper').children().hover(
    function() {
        let subMenu = $(this).find('ul.sub-menu').first()
        subMenu.addClass('active')
        subMenu.children().first().addClass('active')
    },
    function() {
        let subMenu = $(this).find('ul.sub-menu').first()
        subMenu.removeClass('active')
    }
)

现在我需要将项目悬停在并将类更改为悬停的项目。liul.sub-menu.active

我可以通过在项目上添加方法来做到这一点。.hover()subMenu.children()

$('ul.menu-wrapper').children().hover(
    function() {
        ...
        subMenu.children().hover(
            function() {
                $(this).addClass('active')
            },
            function() {
                $(this).removeClass('active')
            }
        )
    },
    function() {
        ...
    }
)

当子菜单项悬停并且指针返回到该项时，我希望该类至少有一个项。ul.menu-wrapper > liul.sub-menu > li.active

目前，当指针从子菜单移动回父列表项时，该方法将删除该类。我怎样才能防止这种情况始终与班级在一起？mouseleaveul.sub-menu > li.active

演示 https://jsfiddle.net/5Lwyh3xs/

html jquery css 悬停嵌套列表

$('ul.menu-wrapper').children().hover(
  function() {
    let subMenu = $(this).find('ul.sub-menu').first()

    subMenu.addClass('active')
    subMenu.children().first().addClass('active')

    subMenu.children().hover(
      function() {
        $(this).addClass('active').siblings().removeClass('active')
      },
      function() {
        $(this).removeClass('active')
        if($('.sub-menu > li.active').length == 0) {
             subMenu.children().first().addClass('active')
        }
      }
    )
  },
  function() {
    let subMenu = $(this).find('ul.sub-menu').first()

    subMenu.removeClass('active')
  }
)

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.menu-wrapper {
  height: 80px;
}

ul.menu-wrapper {
  background: gray;
}

ul.menu-wrapper>li {
  height: 100%;
  display: flex;
  align-items: center;
}

ul.menu-wrapper ul.sub-menu {
  visibility: hidden;
  position: absolute;
  top: 80px;
}

ul.menu-wrapper ul.sub-menu.active {
  visibility: visible;
}

ul.menu-wrapper ul.sub-menu.active>li.active {
  background: darkmagenta;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav role="navigation" id="navigation-wrapper">
  <ul class="menu-wrapper">
    <li>
      <a href="#">Menu item</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Subitem-1</a>
          <ul>
            <li>Sub-Subitem-1</li>
            <li>Sub-Subitem-2</li>
            <li>Sub-Subitem-3</li>
          </ul>
        </li>
        <li>
          <a href="#">Subitem-2</a>
          <ul>
            <li>Sub-Subitem-1</li>
            <li>Sub-Subitem-2</li>
            <li>Sub-Subitem-3</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

https://jsfiddle.net/y5qkb7mv/

上一个：SFMC HTML UL 列表添加额外项目符号

下一个：以递归方式遍历嵌套的 HTML 列表

mouseleave 问题上的 jQuery 嵌套悬停事件 removeClass（）

jQuery nested hover events removeClass() on mouseleave issue

评论