我尝试制作一个 Jquery 下拉菜单,当我滑动菜单项时,它会完美地向下滑动,当我离开菜单项时,它会完美地向上滑动。
唯一的问题是,当我将鼠标向下移动到子菜单时,它会向上滑动,而我想要的是保持打开状态,直到我离开菜单项或子菜单。
HTML
<ul>
<a href="dashboard.php"><li class="dashboard icon-home">Dashboard</li></a>
<a href="#"><li class="icon-pages">Paginas</li></a>
<a class="trigger" href="#"><li class="afbeeldingen icon-image">Afbeeldingen</li></a>
<div class="adminsubmenu">
<a href="#">Submenu item</a>
<a href="#">Submenu item</a>
<a href="#">Submenu item</a>
</div>
<a href="#"><li class="icon-users">Gebruikers</li></a>
<a href="#"><li class="icon-settings">Instellingen</li></a>
</ul>
CSS
div#adminmenu ul li {
font-size:13px;
font-weight:600;
padding:7px 0 7px 28px;
background-color:#fff;
width:175px;
border-bottom:1px solid #c2c2c2;
border-right:1px solid #c2c2c2;
}
div.adminsubmenu {
height:100px;
width:175px;
background:url(../images/adminmenu_bg.png) repeat-y top right #e6e6e6;
}
Jquery
$(document).ready(function(){
$(".adminsubmenu").hide();
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
}).mouseleave(function(){
$(".adminsubmenu").slideUp();
});
});
这是Fiddle
最佳答案
你应该把<a>
<li>
里面,而不是相反,以使 HTML 有效。
也就是说,只需更改您的 JavaScript 即可完全执行您想要的操作:
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
});
$('.adminsubmenu').mouseleave(function(){
$(".adminsubmenu").slideUp();
});
更好的是,将子菜单放置在触发元素内。这样,只要鼠标悬停在子菜单上,您仍然会将鼠标悬停在触发器上:
<li class="afbeeldingen icon-image trigger">
<a class="" href="#">Afbeeldingen</a>
<ul class="adminsubmenu">
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
</ul>
</li>
新的JS:
$(".trigger").mouseover(function () {
$(".adminsubmenu").stop().slideDown();
}).mouseleave(function () {
$(".adminsubmenu").stop().slideUp();
});
关于javascript - Jquery 下拉菜单无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19824126/