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

最新推荐文章于 2024-05-25 13:46:03 发布

weixin_30505751

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CaktyRiven/p/5489602.html

版权

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

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文件

转载于:https://www.cnblogs.com/CaktyRiven/p/5489602.html

weixin_30505751

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery、简单的下拉列表、网页左部导航菜单

简单的下拉菜单、左部导航使用。2016-5-13 记效果图如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉列表</title> <s...
复制链接

扫一扫