zoukankan      html  css  js  c++  java
  • Jquery、简单的下拉列表、网页左部导航菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉列表</title>
        <style type="text/css">
         *{
             margin: 0;
             padding: 0;
         }
         .wrap{
             margin-left: 100px;
             margin-top: 50px;
              120px;
         }
         .caktye_list{
             border: 1px solid #eee;
         }
         .caktye_list li{
             list-style: none;
         }
         .caktye_list li a{
              120px;
            display: block;
            height: 32px;
            line-height: 32px;
            text-decoration: none;
            color: #333;
            /*text-align: center;*/
            border-top: 1px solid #eee;
         }
         .caktye_list li:first-child a{
            border-top: none;
         }
         .cak{
             display: none;
         }
         .cak li a{
             120px;
            border-top: 1px solid #FFF;
            background-color: #FDECF9;
         }
         .cak li a:hover{
           background-color: #eee;
         }
         .cak li:first-child a{
             border-top: none;
         }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul class="caktye_list">
                <li>
                    <a href="###">JavaScript</a>
                    <ul class="cak">
                        <li><a href="###">语法</a></li>
                        <li><a href="###">语句</a></li>
                        <li><a href="###">函数</a></li>
                    </ul>
                </li>
                <li>
                    <a href="###">Jquery</a>
                    <ul class="cak">
                        <li><a href="###">语法</a></li>
                        <li><a href="###">语句</a></li>
                        <li><a href="###">函数</a></li>
                    </ul>
                </li>
                <li>
                    <a href="###">Angular</a>
                    <ul class="cak">
                        <li><a href="###">语法</a></li>
                        <li><a href="###">语句</a></li>
                        <li><a href="###">函数</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
           $(function(){
                $(".caktye_list li a").click(function(){
                     $(this).siblings("ul").slideToggle("fast");
                     $(this).siblings("ul").children("ul").slideUp("fast");
    
                     if($(this).siblings("ul").css("display")== "block"){
                       $(this).parents("li").siblings('li').children('ul').slideUp("fast");
                     }
                })
           })
        </script>
    </body>
    </html>
  • 相关阅读:
    为什么需要配置环境变量
    Highcharts使用简例 + 异步动态读取数据
    使用SQL检测死锁
    2015.12.21-2015.12.25单词
    SQL Server锁定【2015.12.17】
    SQL SERVER 并发【2015.12.16】
    SQL闲杂知识点汇总【2015年12月】
    键和约束【2015.12.11】
    [笔记]聚集索引和非聚集索引相关知识点
    论Top与ROW_NUMBER读取第一页的效率问题
  • 原文地址:https://www.cnblogs.com/Alice-67/p/11280812.html
Copyright © 2011-2022 走看看