【发布时间】:2011-02-02 21:30:58
【问题描述】:
我用 jQuery 代码制作了以下 ul 菜单,想知道 jQuery 代码是否可以更快和/或更高效。我正在使用hoverintend 插件来延迟鼠标悬停时的下拉菜单。所以我不想让菜单的下拉速度更快,但如果可能的话,只有 Jquery 代码更有效率。
更新: 好的,我又清理了一些 css/jQuery 代码。多亏了 Sime Vidas,放弃了悬停功能。但我仍然想知道是否可以使 jQuery 代码更高效。它的菜单代码适用于 chrome、FF 和 IE8。因此人们可以将其用于自己的项目。
HTML 示例:
<div id="top_navbar">
<ul id="topmenu1" class="topmenu">
<li class="menuchild"><a title="Home" href="#" class="mselected"> <span>Home</span></a>
<ul class="subnav">
<li><a title="Historie" href="#"><span>option 1</span></a></li>
<li class="mselected"><a title="Routebeschrijving" href="#"><span>option 2</span></a></li>
<li><a title="User Area" href="#"><span>option 3</span></a></li>
<li><a title="Disclaimer" href="#"><span>option 4</span></a></li>
</ul>
</li>
<li class="menuchild"><a title="Testmenu" href="#"><span>Testmenu</span></a>
<ul class="subnav">
<li><a href="#"><span>option 1</span></a></li>
<li><a href="#"><span>option 2</span></a></li>
<li><a href="#"><span>option 3</span></a></li>
<li><a href="#"><span>option 4</span></a></li>
<li><a href="#"><span>option 5</span></a></li>
<li><a href="#"><span>option 6</span></a></li>
<li><a href="#"><span>option 7</span></a></li>
</ul>
</li>
<li><a title="empty menu" href="#"><span>Empty menu</span></a></li>
</ul>
</div>
jQuery 代码:
var $DropdownMenu = $("#topmenu1");
var $DivSubNav= $DropdownMenu.find(".subnav");
var $MenuHover= $DivSubNav.find("li");
$DropdownMenu.find(".menuchild ul").parent().append("<span class=\"has_child\">∨</span>");
$DropdownMenu.find("ul.mselected").parents("li").children("a").addClass("childselected");
$DivSubNav.each(function () {
$(this).parent().eq(0).hoverIntent({
timeout: 100,over: function () {
var current = $(".subnav:eq(0)", this);current.slideDown(100);
},out: function () {
var current = $(".subnav:eq(0)", this);current.slideUp(200);
}
});
});
样式代码:
#top_navbar{
position:absolute;
z-index:3000;
top:93px;
left:15px;
width:865px;
margin:0;
padding:0;
background-image:none;
background-color:#f9f9f9;
border:2px solid #dfdfdf;
height:26px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/* DROP DOWN MENU */
#topmenu1{
list-style:none;
padding:0;
margin:0;
float:left;
font-size:12pt;
border:0 solid red;
background:transparent;
}
#topmenu1 li{
float:left;
margin:0;
padding:0 5px 0 5px;
position:relative;
margin-left:4px;
border-right:0 solid #EFEFEF;
cursor:pointer;
}
#topmenu1 li a{
padding: 2px;
color: #223147;
display:block;
text-decoration: none;
float: left;
cursor:pointer;
font-size:12pt;
}
#topmenu1 li a:hover{
color:#0aaafd;
}
#topmenu1 .has_child{
width: 10px;
height: 24px;
float: left;
background-image: url(/images/menu/arrow_down_blue2.gif); /* down arrow image */
background-repeat:no-repeat;
background-position:center;
border:0 solid red;
padding-left:3px;
}
#topmenu1 .subnav {
list-style: none;
position: absolute; /* Keeps subnav from affecting main navigation flow */
left: -1px; top: 26px;
margin: 0; padding: 0;
display:none;
float: left;
border: 2px solid #cfcfcf;
border-top:2px solid #fafafa;
z-index:20000;
width:190px;
background-color:#f9f9f9;
border-radius: 0px 0px 5px 5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
#topmenu1 .subnav li{
margin: 0; padding: 0;
clear: both;
background-color:transparent;
border:0 solid green;
width:190px;
position:relative;
}
html #topmenu1 .subnav li a {
padding:0;
display:block;
font-size:11pt;
width:inherit;
text-align:left;
color:#223147;
cursor:pointer;
width:100%;
}
html #topmenu1 .subnav li a span{
padding-left:10px;
}
/* Hover effect for subnav links */
html #topmenu1 .subnav li a:hover {
color:#fff;
background-color:#0aaafd;
border:0 solid red;
margin-right:-5px;
}
/* Hover effect for subnav links */
#topmenu1 .mselected span{
color:#0aaafd;
}
#topmenu1 .subnav .mselected a:hover span{
color:#FFF;
}
#topmenu1 .childselected span{
color:#0aaafd;
}
【问题讨论】:
-
需要更快吗?你的意思是让代码更高效还是让动画更快?
-
你为什么要通过 jQuery 设置 CSS 样式、类名、HTML 标记?
-
.parent().eq(0)是什么意思?我认为一个元素只能有一个父元素。 -
我删除了我的问题,对此感到抱歉!
-
@Sime Vidas 添加的 span 'has-child' 我添加以检查 li 是否有子 ul,如果有,则将箭头添加到父菜单项。我同意 CSS 样式可以在类交换中完成。
标签: jquery html css drop-down-menu