图标菜单上悬停时打开菜单

Question

我一直在寻找解决方案，但找不到任何适合我喜欢得到的东西的东西。我有一个图标，并且要打开下拉菜单，当悬停在大于 980px 的悬停时，然后单击屏幕尺寸小于980px。

这是代码。

/*Hide menu by default*/
$("#menu").hide();
/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
  $("#menu").slideToggle();
});
$("#menuser").hide();
/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
  $("#menuser").slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>
<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>LA BELLE</li>
    <li id="ser_btn">SERVICIOS
      <ul id="menuser">
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
      </ul>
    </li>
    <li>NOTICIAS</li>
    <li>CONTACTO</li>
  </ul>
</nav>

我将感谢任何帮助。

Answer 1

$(function() {
  // check the event to listen to
  var evt = $(window).width() > 980 ? // if the window width is greater than 980
    "mouseenter mouseleave" :         // then lesten for mouseenter and mousleave
    "click";                          // otherwise a click event
  // hide it by default
  $("#menu").hide();
  // on the event evt toggle the menu
  $("#menu-btn").on(evt, function() {
    $("#menu").slideToggle();
  });
  
  // hide it by default
  $("#menuser").hide();
  // on the event evt toggle the menu
  $("#ser_btn").on(evt, function() {
    $("#menuser").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>
<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>LA BELLE</li>
    <li id="ser_btn">SERVICIOS
      <ul id="menuser">
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
      </ul>
    </li>
    <li>NOTICIAS</li>
    <li>CONTACTO</li>
  </ul>
</nav>

Answer 2

我只会在大多数情况下使用CSS进行此操作：

<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>
<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>CONTACTO</li>
  </ul>
</nav>
<style>
  nav#menu { display: none }
  #menu-btn:hover + nav#menu, nav#menu:hover { display:block }
</style>

或更频繁地，我会在button

中嵌套nav

<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
  <nav id="menu">
    <ul>
      <li>INICIO</li>
      <li>CONTACTO</li>
    </ul>
  </nav>
</div>
<style>
  #menu-btn nav { display: none }
  #menu-btn:hover nav, #menu-btn nav:hover { display:block }
</style>