zoukankan      html  css  js  c++  java
  • jq菜单折叠效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜单折叠效果</title>
    </head>
    <script type="text/javascript" src="../../media/js/jquery-min.js"></script>
    <style>
    #listShow>li ul{
    display: none;
    }
    #listShow>li>a{
    background:#ccc;
    }
    li{
    list-style: none;
    }
    </style>
    <script>
    $(function () {
    $('#listShow>li a').click(function () {
    $(this).siblings('ul').toggle().parent('li').siblings('li').children('ul').hide();//方法一
    //$(this).siblings('ul').show().parent('li').siblings('li').children('ul').hide();//方法二
    //$(this).parent('li').children('ul').show().parent('li').siblings('li').children('ul').hide();//方法三
    //$(this).parent('li').children('ul').show(1000).parent('li').siblings('li').children('ul').hide(1000);//方法三拓展(设定显示与隐藏的时间)
    })
    })
    </script>
    <body>
    <div>
    <ul id="listShow">
    <li><a href="#">菜单一</a>
    <ul>
    <li><a href="#">菜单一1</a></li>
    <li><a href="#">菜单一2</a></li>
    <li><a href="#">菜单一3</a></li>
    <li><a href="#">菜单一4</a></li>
    <li><a href="#">菜单一5</a></li>
    </ul>
    </li>
    <li><a href="#">菜单二</a>
    <ul>
    <li><a href="#">菜单二1</a></li>
    <li><a href="#">菜单二2</a></li>
    <li><a href="#">菜单二3</a></li>
    <li><a href="#">菜单二4</a></li>
    <li><a href="#">菜单二5</a></li>
    </ul>
    </li>
    <li><a href="#">菜单三</a>
    <ul>
    <li><a href="#">菜单三1</a></li>
    <li><a href="#">菜单三2</a></li>
    <li><a href="#">菜单三3</a></li>
    <li><a href="#">菜单三4</a></li>
    <li><a href="#">菜单三5</a></li>
    </ul>
    </li>
    <li><a href="#">菜单四</a>
    <ul>
    <li><a href="#">菜单四1</a></li>
    <li><a href="#">菜单四2</a></li>
    <li><a href="#">菜单四3</a></li>
    <li><a href="#">菜单四4</a></li>
    <li><a href="#">菜单四5</a></li>
    </ul>
    </li>
    <li><a href="#">菜单五</a>
    <ul>
    <li><a href="#">菜单五1</a></li>
    <li><a href="#">菜单五2</a></li>
    <li><a href="#">菜单五3</a></li>
    <li><a href="#">菜单五4</a></li>
    <li><a href="#">菜单五5</a></li>
    </ul>
    </li>
    </ul>
    </div>

    </body>
    </html>
  • 相关阅读:
    事务和锁
    Spring AOP @before@after@around@afterreturning@afterthrowing执行顺序
    免安装绿色版本tomcat的问题
    Myeclipse代码提示及如何设置自动提示
    the field DBMS must be defined
    zip4j 2.0压缩 加密压缩
    HttpClient4.x 上传文件
    转发小程序
    【Maven】使用Maven构建多模块项目
    微信小程序官方示例 官方weui-wxss下载于安装 详解
  • 原文地址:https://www.cnblogs.com/cx709452428/p/6019801.html
Copyright © 2011-2022 走看看