javascript - 单击时停止功能

Question

我的代码将在鼠标悬停时显示菜单的子菜单，现在我不想在单击按钮时运行此代码。我怎样才能做到这一点？ ' subMenuDropDown.preventDefault(); ' 和 subMenuDropDown.stopPropagation();不要把戏。

JsFiddle:https://jsfiddle.net/k4ftf4tx/

$('.menu ul li ul').hide();
$('.menu ul li').hover(function(subMenuDropDown) {
  $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
}, function() {
  $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
});

$('.mobileMenuButton').click(function() {
  $('.menu').toggle();
  subMenuDropDown.preventDefault();
});

如您所见，点击它会切换菜单，但悬停时它仍会向下滑动子菜单。

Answer 1

   // Make submenu dropdown on hover
  $('.menu ul li ul').hide();
  $('.menu ul li').hover(function(subMenuDropDown) {
$(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
  }, function() {
$(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
  });
  
  $('.mobileMenuButton').click(function() {
$('.menu').toggle();
   	$('.menu ul li').off('mouseenter').off('mouseleave');
  });

.menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mobileMenuButton" role="button">
  <p>
    Menu
  </p>
</div>
<div class="menu">
  <ul>
    <li><a href="">Something</a>
      <ul>
        <li>Something else</li>
      </ul>
    </li>
  </ul>
</div>

http://api.jquery.com/off/因为我太快了:How do I unbind "hover" in jQuery?