【问题标题】:Faster Jquery dropdown menu code?更快的 Jquery 下拉菜单代码?
【发布时间】: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\">&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;
}

【问题讨论】:

  • 需要更快吗?你的意思是让代码更高效还是让动画更快?
  • 你为什么要通过 jQuery 设置 CSS 样式、类名、HTML 标记?
  • .parent().eq(0) 是什么意思?我认为一个元素只能有一个父元素。
  • 我删除了我的问题,对此感到抱歉!
  • @Sime Vidas 添加的 span 'has-child' 我添加以检查 li 是否有子 ul,如果有,则将箭头添加到父菜单项。我同意 CSS 样式可以在类交换中完成。

标签: jquery html css drop-down-menu


【解决方案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'});
});

【讨论】:

  • @Plippie 为什么不直接使用 CSS 规则进行悬停?
猜你喜欢
  • 1970-01-01
  • 2012-12-22
  • 2017-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多