Question

我正试图找到一种方法，当单击并在页面加载上并单击后，重新禁用鼠标鼠标离开并再次进入该元素时再次启用。

用户将鼠标悬停在element = show子菜单上
用户单击菜单=隐藏子菜单，仅在用户离开菜单元素并再次进入时显示子菜单。
如果用户位于元素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/

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

1 个答案: