Jquery、简单的下拉列表、网页左部导航菜单

简单的下拉菜单、左部导航使用。

2016-5-13 记

效果图如下：

              

 

<!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;
         width: 120px;
     }
     .caktye_list{
         border: 1px solid #eee;
     }
     .caktye_list li{
         list-style: none;
     }
     .caktye_list li a{
         width: 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{
        width: 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>

 

需导入jQuery的js文件

posted @ 2016-05-13 15:35  riven.lcs  阅读(377)  评论(0)  编辑  收藏  举报