將鼠標懸停在圖標菜單JQUERY上時打開菜單

Question

我一直在尋找解決方案，但找不到適合我想要的解決方案。 我有一個圖標，並希望當鼠標懸停在屏幕尺寸大於980px時單擊下拉菜單，然后在屏幕尺寸小於980px時單擊CLICK。

這是代碼。

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

或更常見的是，我會將nav button嵌套在button

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