当前位置: 代码迷 >> Web前端 >> 无限层级上拉菜单(jquery)
  详细解决方案

无限层级上拉菜单(jquery)

热度:5   发布时间:2012-11-23 00:03:43.0
无限层级下拉菜单(jquery)
[color=red]呵呵,先发1个以前工作中自己写的一个东东:[/color]

HTML:            <ul id="daohang">
                <li>
                    <a href="${base}/">首页</a>
                        <ul>
                            <li>
                                <a href="#">下拉一</a>
                                <ul class="aaa">
                                    <li>
                                        <a href="#">下拉二</a>
                                        <ul class="aaa">
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">下拉二</a></li>
                                    <li><a href="#">下拉二</a></li>
                                </ul>
                            </li>
                            <li><a href="#">下拉二</a></li>
                            <li><a href="#">下拉三</a></li>
                        </ul>
                </li>
            </ul>

css:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}

js(基于jquery):
$(document).ready(function(){
         $("#daohang li").hover(function(){
            $(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
        },function(){
            $(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
        });
  相关解决方案