用jQuery写的简单两级树形菜单

最新推荐文章于 2022-05-29 19:56:57 发布

Leon__Li

最新推荐文章于 2022-05-29 19:56:57 发布

阅读量875

点赞数

分类专栏：常用代码文章标签：树形菜单 jquery

本文链接：https://blog.csdn.net/qq_34121668/article/details/51167337

版权

常用代码专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> treeMenu</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../work/css/bootstrap.min.css">
    <script src="../../work/js/jquery.js"></script>
    <style type="text/css">
        /*矢量图标路径，阿里图标库引入*/
        @font-face {font-family: 'iconfont';
            src: url('../fonts/iconfont.eot'); /* IE9*/
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .iconfont{font-family:"iconfont";
            font-size:16px;font-style:normal;}
        .treeMenu{
            border-bottom: 1px solid cornflowerblue;
            border-bottom: none;
            width: 20%;
        }
        .treeMenu>ul{margin: 0;padding: 0;}
        .treeMenu>.treeMenuUl>.firstMenu{
            font-weight: bold;
            font-size: 16px;
            color: #1166A2;
            padding: 10px 30px 10px 0;
            margin-top: -1px;
            cursor: pointer;
            border: 1px solid cornflowerblue;
            text-align: center;
        }
        .treeMenu>.treeMenuUl>.firstMenu:hover{
            background-color: #F8F6F6;
            color: #3218CD;
        }
        .treeMenu>.treeMenuUl>.firstMenu>.treeMenuIcon{
            font-weight: normal;
            font-size: large;
            position: relative;
            right: 50px;
        }
        .treeMenu>ul>li {
            list-style: none;
            border: 1px solid cornflowerblue;
            border-bottom: none;
            position: relative;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: none;
            margin-left: 50px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $(".treeMenuUl").each(function(){
                var i=0;
                $(this).children(".firstMenu").click(function(){
                    if(i==1){
                        $(this).siblings().css("border","none");
                        $(this).siblings().slideUp(300);
                        $(this).children(".treeMenuIcon").html("&#xe628;");
                        if($(this).parent().next("ul").size()==0)
                        {
                            $(".treeMenu").css("borderBottom","none");
                        }
                        i=0;
                    }else{
                        $(this).siblings().slideDown(300);
                        $(this).siblings().css("border","1px solid cornflowerblue");
                        $(this).next().css("borderTop","none");
                        $(this).siblings().css("borderBottom","none");
                        $(this).children(".treeMenuIcon").html("&#xe620;");
                        if($(this).parent().next("ul").size()==0)
                        {
                            $(".treeMenu").css("borderBottom","1px solid cornflowerblue");
                        }
                        i=1;
                    }

                })
            })
        })
    </script>
</HEAD>
<BODY>
<div class="treeMenu">
    <ul class="treeMenuUl">
        <div class="firstMenu"><span class='iconfont treeMenuIcon'>&#xe628;</span>一级菜单</div>
        <li><a href="#">二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
    </ul>
    <ul class="treeMenuUl">
        <div class="firstMenu"><span class='iconfont treeMenuIcon'>&#xe628;</span>一级菜单</div>
        <li><a href="#">二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
    </ul>
    <ul class="treeMenuUl">
        <div class="firstMenu"><span class='iconfont treeMenuIcon'>&#xe628;</span>一级菜单</div>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
        <li><a>二级菜单</a></li>
    </ul>
</div>
</BODY>
</HTML>

Leon__Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jQuery写的简单两级树形菜单

html> treeMenu http-equiv="content-type" content="text/html; charset=UTF-8"> rel="stylesheet" href="../../work/css/bootstrap.min.css"> src="../../work/js/jquery.js"> type="text/
复制链接

扫一扫

专栏目录