`
sd1992585
  • 浏览: 48833 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

无限层级下拉菜单(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;
        });
分享到:
评论

相关推荐

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    jquery -- select美化--多级联动下拉

    jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便

    干净漂亮的多级下拉菜单导航

    常用的二级下拉菜单导航,最多支持四级下拉

    实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect

    实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect,功能强大非常不错的jQuery插件, 支持省市区三级联动以及全球国家城市的联动,数据采用JSON格式导入,非常方便的,强大的参数 自定义功能,还可以...

    jQuery多层级垂直手风琴菜单

    之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单 下拉展开带弹性动画,这次分享的这款手风琴菜单是多层级的,你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的,因此这款手风琴菜单的兼容性...

    简单的多级垂直手风琴下拉列表菜单

    这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。

    CSS jQuery带箭头翻转动画的二级下拉菜单.rar

    CSS jQuery共同实现的一款带动画效果的菜单,菜单上的箭头会翻转的动画二级下拉菜单,风格十分简洁,几乎没有使用图片美化。菜单颜色若要修改,可直接修改CSs代码即可。菜单动画效果的实现主要是引入了jquery插件来...

    jquery实现多级下拉菜单的实例代码

    多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码,有需要的朋友可以参考一下

    jQuery地区树型菜单选择插件

    jQuery地区树型菜单选择插件(梅花雪),梅花雪基于jQuery 的树型地区菜单选择插件(全国三级省市县地区),以及一个带复选框、支持层级的自定义表格,看上去很强大,特别是学习jQuery的朋友相当有用,本代码是从一...

    jQuery实现精美的多级下拉菜单特效

    这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。 代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ...

    文章管理系统

    8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V2.74更新包 1.[新增]后台引导页加入非IE浏览器提示,后台部分...

Global site tag (gtag.js) - Google Analytics