[英]Jquery dropdown menu not working properly
当我滑动菜单项使其向下完美滑动时,我尝试制作一个Jquery下拉菜单,而当我离开菜单项时其向上完美滑动时,我尝试制作了一个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();
});
});
这是小提琴
您应该将<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();
});
<li><a ... </a></li>
代替
<a><li> </li></a>
实际上是相反的方式
正是您所说的。 当鼠标离开a.trigger
,菜单向上滑动。 因此,您只需要将其更改为$(".adminsubmenu").mouseleave
这就是您想要的:
$(document).ready(function(){
$(".adminsubmenu").hide();
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
})
$(".adminsubmenu").mouseleave(function(){
$(".adminsubmenu").slideUp();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.