Question

我使用类似于http://yensdesign.com/tutorials/tabs/的标签菜单，但悬停而不是点击。目前我必须使用'default'来关闭菜单。

如何开始关闭所有下拉菜单？
当用户将鼠标悬停在选项卡上时，菜单应该展开，只有当用户将鼠标悬停在展开的菜单之外时才会关闭。

使用的查询：

$(document).ready(function(){
 $(".menu > li").mouseover(function(e){
  switch(e.target.id){
   case "default":
    //change status & style menu
    $("#default").addClass("active");
    $("#elec_gas").removeClass("active");
    $("#home_energy").removeClass("active");
    //display selected division, hide others
    $("div.default").css("display", "none");
    $("div.elec_gas").css("display", "none");
    $("div.home_energy").css("display", "none");
   break;
   case "elec_gas":
    //change status & style menu
    $("#default").removeClass("active");
    $("#elec_gas").addClass("active");
    $("#home_energy").removeClass("active");
    //display selected division, hide others
    $("div.default").css("display", "none");
    $("div.elec_gas").fadeIn();
    $("div.home_energy").css("display", "none");
   break;
   }
  //alert(e.target.id);
  return false;
 });
});

Answer 1

要开始关闭它们，请为子菜单提供display: none;的CSS或在脚本中执行此操作，方法是在document.ready处理程序中添加：

$("div.default, div.elec_gas, div.home_energy").hide();

对于悬停关闭它们的cild ...使用mouseleave事件代替mouseout，如下所示：

$(".menu > li").mouseleave(function(e){

来自the .mouseleave() docs：

mouseleave事件处理事件冒泡的方式与mouseout不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开绑定的元素而不是后代时触发其处理程序。因此，在此示例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序。

选项卡菜单 - jquery mouseover / mouseout问题

1 个答案: