[英]How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu
我正在尝试创建一个下拉菜单。 运行良好。 当鼠标悬停成白色时,我想要顶层菜单。 向下移动到子菜单时,顶部菜单应保持白色。 但是顶层菜单会变成其正常的原始颜色。
在子菜单中移动鼠标时如何保持父菜单悬停。
代码在这里:
HTML
<ul id="jsddm" class="menu_nor_cont">
<li style="margin-left:15px;"><a href="#">Home</a>
<li><a href="#">Job Seeker Login</a>
</li>
<li><a href="#">Post Resume</a>
</li>
<li><a href="#">Search jobs<span style="margin-left:5px;"><img src="images/down.png" style="width=15px; height=8px;"></span></a>
<ul>
<li><a href="#">Advanced Search</a></li>
<li><a href="#">Jobs by Company</a></li>
<li><a href="#" style="border-bottom:none;">Jobs by category</a></li>
</ul>
</li>
<li><a href="#">Employer Login</a></li>
<li><a href="#" style="border-right:none;">Post Job</a></li>
</ul>
JS
var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
CSS
#jsddm
{ margin: 0;
padding: 0;
}
#jsddm li
{
float: left;
list-style: none;
}
#jsddm li a
{ display: block;
padding: 5px 12px;
padding-left:15px;
padding-right:15px;
text-decoration: none;
border-right: 1px solid #DBDBDB;
padding-bottom:6px;
color: #EAFFED;
white-space: nowrap}
#jsddm li a:hover
{
background-color:#FFF;
color:#000;
}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border:#3895C0 1px solid;
border-top:none;
z-index:1001;
margin-left:-2px;
}
#jsddm li ul li
{ float: none;
display: inline;
margin:0px;
}
#jsddm li ul li a
{ width: auto;
background: #fff;
color:#080CB2;
font-weight:normal;
font-size:11px;
border-bottom:1px solid #CCC;
text-decoration:none;
width:180px;
}
#jsddm li ul li a:hover
{
text-decoration:underline;
color:#080CB2;
}
我不明白为什么您需要在这里使用JS。 我已经看到了很多人在尝试制作简单的下拉菜单的示例,而这些下拉菜单只是没有花时间使用适当的HTML结构并使用CSS来操作元素。
除非您真的想拥有某种动画(但仍然可以使用CSS3转换来进行动画处理),否则我建议使用这个答案,该答案是我给另一位曾经遇到下拉问题的用户的。
上面的链接为您提供了一个非常快速,直接的HTML + CSS下拉解决方案示例。 使用此示例,您可以仅通过HTML和CSS保持父链接处于“选中”状态,从而实现您的期望。
编辑:
直接说出您的问题。 解决问题所要做的就是将CSS设置得有些不同。
更改:
#jsddm li a:hover {
background-color:#FFF;
color:#000;
}
至:
#jsddm li:hover a {
background-color:#FFF;
color:#000;
}
如您所见,我正在选择li
元素以使用:hover
伪选择器而不是a标记。 这是因为您将子菜单ul
包装在此标签内。 因此从技术上讲,它是父元素。
问题是由于CSS中的“悬停”状态,因此当您离开“ a”元素时,您会松开悬停状态。
对您的代码进行几次修改即可完成此工作。
function jsddm_open() {
jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
$(">a", $(this)).css("background-color", "#FFF");
}
function jsddm_close() {
if (ddmenuitem) {
ddmenuitem.css('visibility', 'hidden');
$(ddmenuitem).prev().css("background-color", "");
}
}
注意:您在发布的代码中也缺少结尾的li标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.