在页面加载超过元素时禁用鼠标

Question

我试图找到一种方法来禁用鼠标中心，当顶级导航项是时，单击&在页面加载上，当鼠标离开并再次进入元素时再次启用。

• 用户在元素上盘旋=显示子菜单
• 用户单击menu =隐藏子菜单，只在用户离开菜单元素并再次进入时显示子菜单。
• 如果用户在元素onLoad上，那么当用户离开元素并再次进入时，只显示子菜单。

​

$('.navmenu li').on('mouseenter', function(e) {
	$(e.target).next().addClass('js-hover')
}).on('mouseleave', function(e) {
	$(e.target).next().removeClass('js-hover')
});


$('.navmenu').on('click', function(e) {
	$(e.target).next().removeClass('js-hover')
  location.reload(true);
})

.navmenu .submenu {
  display:none;
}

.navmenu li {
  display: inline;
}

.navmenu .submenu {
  position:absolute;
  top:40px;
  left:0
}

.navmenu li:hover .js-hover {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navmenu">
  <ul>
    <li>
      <a href="#">Menu</a>
      <nav class="submenu">
        <ul>
          <li>Submenu 1</li>
          <li>Submenu 2</li>
          <li>Submenu 3</li>
        </ul>
      </nav>
    </li>
    <li>
      <a href="#">Menu 2</a>
      <nav class="submenu">
        <ul>
          <li>Submenu 4</li>
          <li>Submenu 5</li>
          <li>Submenu 6</li>
        </ul>
      </nav>
    </li>
  </ul>
</nav>

​

Answer 1

这可以使用变量和存储元素状态(如果应该隐藏或不隐藏)来完成。但是，由于您试图通过类属性来实现这一点，我也是这样做的。这里是一个菜单项的简单例子，一切都应该是清楚的。

<nav class="navmenu">
  <ul>
    <li>
      <a href="#">Menu</a>
      <nav class="submenu" hidden>
        <ul>
          <li>Submenu 1</li>
          <li>Submenu 2</li>
          <li>Submenu 3</li>
        </ul>
      </nav>
    </li>

  </ul>
</nav>

和javascript：

$menuLink = $("nav.navmenu li > a");

$menuLink.click(function () {
    $(this).addClass("dontHide");
});

$menuLink.mouseenter(function () {
    $(this).next("nav.submenu").removeAttr("hidden");
  $(this).removeClass("dontHide");
});

$menuLink.mouseleave(function () {
    if(!$(this).hasClass("dontHide")) { 
    $(this).next("nav.submenu").attr("hidden", true);   
  }
});

现场演示：https://jsfiddle.net/g3fua461/24/