Hiển thị/ẩn menu thả xuống khi di chuột/di chuột qua jquery

Question

vì vậy tôi có thanh điều hướng đơn giản với menu thả xuống khi người dùng di chuột trên tab khác. tôi muốn ẩn menu thả xuống khi người dùng di chuột ra khỏi danh mục div.

vấn đề là khi người dùng di chuột vào một li li, trình đơn thả xuống sẽ đóng lại. làm thế nào tôi có thể thiết lập nó để chức năng bỏ qua các li li trong div loại. đã thử các danh mục> * nhưng không hoạt động.

<div id="navbar"> 
    <ul> 
    <li>tab1</li> 
    <li>tab2</li> 
    <li id="moretab">more</li> 
    </ul> 
</div> 
<div id="categories"> 
    <ul> 
    <li>cats</li> 
    <li>dogs</li> 
    </ul> 
</div> 

$("#moretab").hover(function(){ 
    $("#categories").css("visibility","visible"); 
}); 
$("#categories").mouseout(function() { 
    $("#categories").css("visibility","hidden"); 
}); 

Answer 1

Câu trả lời đơn giản nhất là làm thế nào bạn sẽ làm điều đó mà không cần jQuery: đưa menu thả xuống trong các yếu tố kích hoạt (ví dụ thả xuống danh sách trong mục danh sách trong danh sách điều hướng).

Nếu bạn muốn điều gì đó ít đơn giản hơn, mouseleave có thể hữu ích.

Answer 2

$(document).ready(function() { 

    $("#moretab").mouseenter(function(){ 
    $("#categories").show(); 
    }); 

    $("#categories, #moretab").mouseleave(function(){ 
    $("#categories").hide(); 
    }); 
}); 

Answer 3

Điều này có thể hữu ích! Ẩn "sub_menu" đầu tiên.

//html 

<ul> 
<li id = "menu"> <a href ="#"> Settings </a> 
    <ul id = "sub_menu"> 
    <li> <a href ="#"> page 1</a></li> 
    <li> <a href ="#"> page 2</a></li> 
    </ul> 
</li> 
<li>SomeLink</li> 
<li>SomeLink 2</li> 
</ul> 

//Javascript 

     $("#menu").hover(function() { 
      $("#sub_menu").show(); 
     }, function() { 
      $("#sub_menu").hide(); 
     }); 

Answer 4

vài điều:

• đặt div bên trong "#moretab" để rê chuột từ menu trở lại "nhiều hơn" sẽ không đóng nó lại.

• thêm một sự chậm trễ từ MouseLeave, đó là trải nghiệm người dùng thích hợp hơn

  <div id="navbar"> 
      <ul> 
       <li>tab1</li> 
       <li>tab2</li> 
       <li id="moretab">more 
        <div id="categories"> 
         <ul> 
          <li>cats</li> 
          <li>dogs</li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
  </div> 
  
  <script type="text/javascript"> 
  $(document).ready(function(){ 
  
  $("#moretab").hover(function(){ 
      $("#categories").slideDown("fast"); 
      clearTimeout(debounce); 
  }); 
  
  $("#moretab").mouseleave (function() { 
      debounce = setTimeout(closeMenu,400); 
  }); 
  
  var debounce; 
  var closeMenu = function(){ 
      $("#categories").slideUp("fast"); 
      clearTimeout(debounce); 
  } 
  
  }); 
  </script> 
  

Answer 5

Jquery hover Plugin bao gồm cả mouseenter và chức năng MouseLeave và mã sau hoạt động tốt đối với tôi.

javascript:

$(document).ready(function(){ 
    $('.dropdown').hover(
    function(){ 
     $(this).children('.sub-menu').slideDown('fast'); 
    }, 
    function() { 
     $(this).children('.sub-menu').slideUp('fast'); 
    }); 
});