付费节点推荐

免费节点

节点使用教程

学了一段时间的jQuery了，很少写些分享的东西，年底了，公司的项目基本处在停滞时间了，终于有时间可以写点东西了，下面花了一天总结了一款通用且很实用的jQuery下拉菜单，希望能给大家带来帮助：

<ul class="hhgg-menubox" id="nav-categories">

 <li class="hhgg-wfdh">

<a href="#nogo" class="nav-rqspf">让球胜平负</a>

            <ul>        

           <li><a href="#">过关固定奖金</a></li>        

           <li><a href="#">单关浮动奖金</a></li>        

           </ul>        

             </li>          

             <li class="hhgg-wfdh jian-bg">        

            <a href="#nogo">总进球数</a>        

            <ul>        

              <li><a href="#">过关固定奖金</a></li>        

              <li><a href="#">单关浮动奖金</a></li>        

              </ul>        

             </li>              

             <li class="hhgg-wfdh jian-bg2">        

           <a href="#nogo">比分</a>        

           <ul>        

           <li><a href="#">过关固定奖金</a></li>        

           <li><a href="#">单关固定奖金</a></li>        

              </ul>        

            </li>      

            <li class="hhgg-wfdh"><a href="#">单场决胜</a></li>        

</ul>        

<script type="text/javascript"></script>        

           //两个参数，一个导航ul标签的id，一个是下拉菜单的显示速度，越小越        

           function zvMenu(ulElementId,speed){        

             //JQ一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。        

             $("#"+ulElementId).children("li:has(ul)").hover( function(){        

            $(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式，此处非必要        

            $(this).children("ul").slideDown(speed);//JQ的slideDown方法，显示下拉菜单        

             },function(){        

            $(this).children("ul").hide();//隐藏下拉菜单        

             });        

             //JQ动画，可选        

             $("#"+ulElementId).find("li>ul>li>a").hover(        

             function(){        

            $(this).animate({paddingLeft:"30px"},speed);        

             },function(){        

            $(this).animate({paddingLeft:"20px"},speed);        

             });        

           }        

           $(function(){        

           zvMenu("nav-categories",100);//下拉菜单函数调用        

           });        

</script>

注：记得调用公用JQ代码,例如：
<script type="text/javascript" src="http://888.gtimg.com/js/public/jquery-1.7.2.min.js?t=20120928"></script>

.hhgg-menubox{position:relative;width:716px;height:28px;line-height:28px;border:solid #C5C5C5 1px;background:#f1f1f1;}        

.hhgg-wfdh{position:relative;float:left;}        

.hhgg-wfdh a{display:block;margin:0;padding:0 15px;}        

a.nav-rqspf{background:#DFDDDD}        

.hhgg-wfdh ul{position:absolute;width:89px;display:none;border:solid #C5C5C5;border-width:0 1px 1px 1px;background:#fff;left:-1px;}        

.hhgg-wfdh ul li a{padding:0 0 0 10px;margin:0;}        

.hhgg-wfdh ul li a:hover{background:#EFEEEE;}        

总结：我们在做页面的时候多处出现下拉菜单，掌握了上面的方法直接在JQ代码中添加，改变ID名字即可，如下：

           $(function(){        

           zvMenu("nav-categories",100);//        

           zvMenu("nav-categories2",100);//        

           zvMenu("nav-categories3",100);//        

           ...

           });        

这是一款比较好的多个下拉菜单的应用，并且应用起来很方便，各位大侠有建议或者问题直接留言，谢谢！

相关文章“[通用]jQuery之tab切换-学习篇”。

bcoder编程网

#jQuery-menu.html">bcoder编程网/jQuery-menu.html

未经允许不得转载：Bcoder资源网 » [通用]jQuery下拉菜单-学习篇

相关推荐