JQ制作二级菜单

最新推荐文章于 2021-08-06 10:30:55 发布

浅浅一笑^*^

最新推荐文章于 2021-08-06 10:30:55 发布

阅读量417

点赞数

分类专栏： JQ dom 文章标签： js css html

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105672664

版权

JQ 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

dom

10 篇文章 0 订阅

订阅专栏

效果图:
在这里插入图片描述
css

  <style>
        *{
            margin:0;
            padding:0;
        }

        li{
            list-style: none;
            text-align: center;
        }
        #ul1{
            width: 600px;
            margin: 50px auto
        }
        #box>#ul1>li{
            text-align: center;
            float: left;
            width: 100px;
            line-height: 30px;
            border: 1px silver solid;
        }
       #ul1>li>ul{
            display: none;
        }

    </style>
</head>
<body>
<div id="box">
    <ul id="ul1">
        <li>第一层栏位
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
                <li>第6个</li>
            </ul>
        </li>
        <li>第二层栏位
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
                <li>第6个</li>
            </ul>
        </li>
        <li>第三层栏位
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
                <li>第6个</li>
            </ul>
        </li>
        <li>第四层栏位
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
                <li>第6个</li>
            </ul>
        </li>
        <li>第五层栏位
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
                <li>第6个</li>
            </ul>
        </li>
    </ul>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        var obj={
            str:"0123456789abcdef",
            num:0
        };
        var $lis=$("#ul1>li");
        for(var i=0;i<$lis.length;i++){//循环遍历每一项
           // console.log($lis[i]);
            var randomColor="#";//随机颜色
            for(var j=0;j<6;j++){//小于6次
                var randomNum=Math.floor(Math.random()*obj.str.length);//随机数下标
                randomColor+=obj.str[randomNum];//得到随机颜色的拼接
            }
            $($lis[i]).css("background",randomColor);//执行随机颜色样式
        }
        //stop()的作用:停止所有在指定元素上正在运行的画,如果队列中有等待执行的动画，他们将被
        //马上执行
       $("#ul1>li").mouseover(function() {//鼠标移入
         $(this).children().stop().slideDown(1000);//当前.所有子节点.滑出显示
         $(this).nextAll().children().stop().slideUp(1000);//当前.下面所有的兄弟节点.滑出隐藏
         $(this).prevAll().children().stop().slideUp(1000);//当前.上面所有的兄弟节点.滑出隐藏
       }).mouseleave(function() {//鼠标移出
           $("#ul1>li>ul").stop().slideUp(1000);//滑出隐藏
       })
    })
</script>