zoukankan      html  css  js  c++  java
  • jquery 多级无限分类

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> xx </title>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <style>
    #linNav{position:absolute;z-index:1000;}
    #linNav ul,li{padding:0;margin:0;}
    #linNav ul li{float:left;margin-right:1px; display:inline;list-style:none;text-align:center;45px;font-size:12px;}

    #linNav ul li ul li{float:none;display:block;position:relative;}
    #linNav ul li ul{display:none;}
    #linNav ul a{line-height:18px;height:18px;}

    #linNav ul li ul li .aaa{position:absolute;left:45px;top:0;}
    #linNav ul li ul li .aaa li{float:none;}
    .bbb{background:#ffff00;}

            </style>

    <script src="js/jquery-1.7.1.min.js" /></script>

    </head>

    <body>
    <div id="linNav">
    <ul>
        <li><a href="">index</a></li>
        <li><a href="">栏目二</a>
            <ul>
                <li><a href="">子栏目1</a></li>
                <li><a href="">子栏目2</a>
                    <ul class="aaa">
                        <li><a href="">子栏目3</a></li>
                        <li><a href="">子栏目3</a>
                        
                
                    <ul class="aaa">
                        <li><a href="">子栏目3</a></li>
                        <li><a href="">子栏目3</a>
                        
                        
                        </li>
                    </ul>                    


                        </li>
                        <li><a href="">子栏目3</a>
                        </li>
                    </ul>
                </li>
            
            </ul>
        </li>
    </ul>
    <br style="clear:both;" />
    </div>

    <br />
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <script>
    $(document).ready(function(){
    $("ul li").hover(function(){

    $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示;
    },function(){
    $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul;
    })
    $("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css;
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    Java单例模式:为什么我强烈推荐你用枚举来实现单例模式
    为什么阿里Java规约要求谨慎修改serialVersionUID字段
    使用MyCat实现MySQL读写分离
    你知道HTTP协议的ETag是干什么的吗?
    在centos7中安装MySQL5.7
    MySQL实现主从复制功能
    Leetcode题目169.求众数(简单)
    Leetcode题目160.相交链表(简单)
    Leetcode题目155.最小栈(简单)
    Leetcode题目152.乘积最大子序列(动态规划-中等)
  • 原文地址:https://www.cnblogs.com/lin3615/p/3590749.html
Copyright © 2011-2022 走看看