我已经设置了一个 jquery 悬停显示和隐藏功能 click here for site但是它没有按照我想要的方式工作。当您将鼠标悬停在“store”链接上时,它会显示隐藏的 div,这是一个子菜单,一旦鼠标光标从“store”链接移开,隐藏的 div 就会滑动。
我希望子菜单保持激活状态,除非子菜单中的链接已被单击或鼠标光标已移出子菜单区域。
下面是我的代码片段...
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function(){
$(".slidingDiv").slideToggle();
});
$('.slidingDiv').mouseout(function(){
$(".slidingDiv").slideUp();
});
});
<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
<li><a href="#">sweats / knitwear</a></li>
<li><a href="#">shirts</a></li>
<li><a href="#">denim</a></li>
<li><a href="#">outwear</a></li>
<li><a href="#">footwear</a></li>
</ul>
</div>
<div class="menu">
<h3>lifestyle</h3>
<ul class="navigation">
<li><a href="#">books</a></li>
<li><a href="#">art</a></li>
<li><a href="#">objects</a></li>
</ul>
<div id="menu">
<ul class="cl">
<li><a class="show_hide" href="#">store</a></li>
<li><a href="#">daily</a></li>
<li><a href="#">featured</a></li>
<li><a href="#">contact</a></li>
</ul>
有人对此有解决方案吗...?
最佳答案
我想通了。 http://jsfiddle.net/vtFfv/ 相关文档:http://api.jquery.com/mouseleave/
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseenter(function () {
$(".slidingDiv").slideDown();
$(".slidingDiv").mouseleave(function () {
$(".slidingDiv").slideUp();
});
$('.slidingDiv a').each(function () {
$(this).click(function () {
$(".slidingDiv").slideUp();
});
});
});
});
当您隐藏 slidingDiv
时,不会注册鼠标事件。因此,解决方案是在您决定显示它时(即在 mouseenter
上)附加一个 mouseleave
事件。然后点击链接注册就很容易了。
关于javascript - jquery 显示和隐藏 mouseout() 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16506011/