jQuery悬停并检查链接是否被点击

我想检查链接“meist”是否被点击，并且如果点击了链接而不是将子菜单改为submeist。因此，如果您将鼠标悬停在外，它将自动返回到子菜单jQuery悬停并检查链接是否被点击
当我想要单击子菜单上的某些内容时，子菜单将消失，我无法找出它的修复方法。

HTML

<ul id="menüü"> 
    <li id="meist"> 
     <p><a href="meist.html">Meist</a></p> 
    </li> 
    <li id="seadmed"> 
     <p><a href="seadmed.html">Seadmed</a></p> 
    </li> 
</ul> 

<div id="submenu"> 
    <ul id="submeist"> 
     <li class="asi1"> 
      Asi 1 
     </li> 
     <li class="asi2"> 
      Asi 2 
     </li> 
     <li class="asi3"> 
      Asi 3 
     </li> 
    </ul> 

    <ul id="subseadmed"> 
     <li class="item1"> 
      Item 1 
     </li> 
     <li class="item2"> 
      Item 2 
     </li> 
     <li class="item3"> 
      Item 3 
     </li> 
    </ul> 
</div>

CSS

#meist { 
    display: inline; 
    float:left; 
    width:180px; 
    height:50px; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 
    background:#990000; 
    -moz-border-radius-top-left: 50px; 
    border-top-left-radius: 50px; 
} 
#meist:hover { 
    text-decoration: underline; 
    color: white; 
    font-size: 17.5px; 
    line-height: 15px; 
} 
#seadmed { 
    display: inline; 
    float:left; 
    width:180px; 
    height:50px; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 
    background:#990000; 
} 
#seadmed:hover { 
    text-decoration: underline; 
    color: white; 
    font-size: 17.5px; 
    line-height: 15px; 
} 
#submenu { 
    color:white; 
    height:25px; 
    width:900px; 
    background:#630000; 
    margin-top:50px; 
} 
#submeist { 
    display:none; 
    font-size:12px; 
} 
#submeist .asi1 { 
    margin-left:70px; 
    height:25px; 
    width:75px; 
} 
#submeist .asi2 { 
    margin-left:25px; 
} 
#submeist .asi3 { 
    margin-left:25px; 
} 
#subseadmed { 
    display:none; 
    font-size:12px; 
} 
#subseadmed .item1 { 
    margin-left:70px; 
    height:25px; 
    width:75px; 
} 
#subseadmed .item2 { 
    margin-left:25px; 
} 
#subseadmed .item3 { 
    margin-left:25px; 
}

$(document).ready(function() { 
    $("#meist").mouseleave(function() { 
     $("#submeist").hide(); 
     return false; 
    }); 

    $("#meist").mouseenter(function() { 
     $("#submeist").show(); 
     return false; 
    }); 

    $("#seadmed").mouseleave(function() { 
     $("#subseadmed").hide(); 
     return false; 
    }); 

    $("#seadmed").mouseenter(function() { 
     $("#subseadmed").show(); 
     return false; 
    }); 
});

来源

2013-06-03 VonHornmeister

只是在这里提示：我不会推荐在你的ID和类中使用特殊字符（'ü'，'é'，'è'等），有些浏览器可能会遇到这些问题。 –

好的......我会在它解决之后不久改变它们。谢谢你的提示 – VonHornmeister

用OP的代码做了一个小提琴：http://jsfiddle.net/PhwfT/ – qJake

我想你可以通过添加

0123耽误隐藏阙

和

$("#seadmed").mouseleave(function() { 
    $("#subseadmed").delay(1000).hide('fast'); 
    return false;

小心延迟阙。仅在必要时添加。这可能是临时解决方案之一，这不是唯一的解决方案。

根据需求增加隐藏子菜单的时间。

来源

2013-06-03 17:48:02 Nirus

jQuery悬停并检查链接是否被点击

回答

相关问题