Question

我使用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\">&or;</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;
}

Answer 1

悬停部分可以优化：

$MenuHover.hover(function () {
    var c = $(this).hasClass('mselected') ? '#acb3ba' : '#0aaafd';        
    $(this).stop(true).css({'background-color':c,'cursor':'pointer'}).children('a').css({'color':'#fff'});
}, function () {
    $(this).stop(true).css({'background-color':'transparent'}).children('a').css({'color':'#223147'});
});

更快的Jquery下拉菜单代码？

1 个答案: