Javascript jQuery菜单-在下拉悬停时保持菜单活动
我正在编写一个jquery菜单来满足我的需要。我知道这里没有必要重新设计轮子,但这也是一次学习经历 此外,我知道代码很难看,但我会重新构造,并在它正常工作后清理它 我的问题是,当我把鼠标悬停在下拉链接上时,它就消失了。我希望它保持在那里,并且父菜单处于活动状态。感谢您的帮助 下面是一些代码:Javascript jQuery菜单-在下拉悬停时保持菜单活动,javascript,jquery,menu,Javascript,Jquery,Menu,我正在编写一个jquery菜单来满足我的需要。我知道这里没有必要重新设计轮子,但这也是一次学习经历 此外,我知道代码很难看,但我会重新构造,并在它正常工作后清理它 我的问题是,当我把鼠标悬停在下拉链接上时,它就消失了。我希望它保持在那里,并且父菜单处于活动状态。感谢您的帮助 下面是一些代码: <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
<div>
<ul>
<li>
<div class="menu-item"></div>
<div class="menu-text">text</div>
<div class="dropdown">
<div class="dropdown-item"><a href="#">item 1</a></div>
<div class="dropdown-item"><a href="#">item 2</a></div>
<div class="dropdown-item"><a href="#">item 3</a></div>
</div>
</li>
<li><div class="menu-item"></div><div class="menu-text">texttexttext</div></li>
<li><div class="menu-item"></div><div class="menu-text">tetexttexttexttexttexttexttextxt</div></li>
</ul>
</div>
<script>
$(function() {
$("div.menu-text").mouseover(function () {
$(this).prevAll('div.menu-item').animate({height: '100%'},
{
duration: 700,
specialEasing: {height: 'easeOutQuint'}
}
);
if($(this).siblings('div.dropdown').is(':hidden')){
$(this).siblings('div.dropdown').slideDown();
}
});
$("div.menu-text").mouseout(function () {
$(this).prevAll('div.menu-item').animate({height: '10px'}, 700);
if($(this).siblings('div.dropdown').is(':visible')){
$(this).siblings('div.dropdown').slideUp();
}
});
$("div.dropdown-item a").hover(function () {
$(this).parent().siblings('div.menu-item').css("display","block");
$(this).parent().css("display","block");
});
});
</script>
</body>
</html>
您的JS有很大的改进空间,但这将实现以下目的: 我使用的是
.hover()
,它有两个函数,第一个用于悬停开始时,第二个用于悬停结束时。您还需要将其移动到父元素(即li
),以便悬停在子元素上方时保持不变。请参见:
JSFIDLE示例不完整。需要jquery库。未包含在JSFIDLE示例中。我不知道有关hover的内容,谢谢您让我知道。
li {
background-color: #ccc;
position: relative;
color: #fff;
z-index: -2;
float: left;
}
div.menu-item {
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
z-index: -1;
}
div.menu-text {
color: #fff;
margin: 0;
padding: 20px 10px;
}
div.dropdown {
display: none;
position: absolute;
}
div.dropdown-item a {
padding: 10px;
background-color: #1E4b55;
display: block;
white-space: nowrap;
}
$(function() {
$("li").hover(
function() {
$(this).find('div.menu-item').animate({height: '100%'},
{
duration: 700,
specialEasing: {
height: 'easeOutQuint'
}
});
if($(this).find('div.dropdown').is(':hidden')) {
$(this).find('div.dropdown').slideDown();
}
},
function() {
$(this).find('div.menu-item').animate({height: '10px'}, 700);
if($(this).find('div.dropdown').is(':visible')){
$(this).find('div.dropdown').slideUp();
}
}
);
});
$(function () {
$("li").hover(
function () {
$(this).find('div.menu-item').stop().animate({
height: '100%'
}, {
duration: 700,
specialEasing: {
height: 'easeOutQuint'
}
});
$(this).find('div.dropdown').slideDown();
},
function () {
$(this).find('div.menu-item').stop().animate({
height: '10px'
}, 700);
$(this).find('div.dropdown').stop().slideUp();
});
});