时间戳

首页 > 解决方案 > 页面加载时在元素上方禁用 mouseenter

javascript - 页面加载时在元素上方禁用 mouseenter

问题描述

我正在尝试找到一种方法来在单击顶级导航项并在页面加载时禁用mouseenter并在鼠标离开并再次进入元素时再次重新启用。

$('.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>

标签： javascriptjquery

解决方案

这可以使用变量和存储元素的状态来完成（如果它应该被隐藏）。但既然你试图通过类属性来做到这一点，我也做了同样的事情。这是一个菜单项的简单示例，一切都应该清楚。

<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/

推荐阅读