其他分享
首页 > 其他分享> > JQ实现二级菜单联动

JQ实现二级菜单联动

作者：互联网

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级联动菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .bigBox {
            margin: 100px auto;
            width:1200px;
        }

        ul {
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        ul,
        .mini-box {
            text-align: center;
            
        }
        .mini-box{
            display: none;
            height: 200px;
            background:#fcfcfc;
        }
        .li-active{
            background:rgb(163, 38, 163);
            color:#fff;
            font-size: 24px;
            transform: scale(1.07);
            border:none;
            position: relative;
            z-index:1;
        }
        li:hover{
            background:rgb(163, 38, 163);
            color:#fff;
            font-size: 24px;
            transform: scale(1.07);
            border:none;
            position: relative;
            z-index:1;
        }
        ul li{
            display: inline-block;
            width: 200px;
            height: 180px;
            border:1px dashed #ccc;
            text-align: center;
            line-height: 180px;
            transition: all .5s;
            cursor: pointer;
        }
        ul li:not(:last-child){
            border-right: 0;
        }
       
        .mini-box-active{
            display: block;
        }
       
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="item-box">
            <ul>
                <li class="li-active">
                    <span>餐饮行业</span>
                </li>
                <li>
                    <span> 家具行业</span>
                </li>
                <li>
                    <span>服务行业</span>
                </li>
                <li>
                    <span>旅游行业</span>
                </li>
                <li>
                    <span>建材行业</span>
                </li>
                <li>
                    <span>互联网/IT行业</span>
                </li>
            </ul>
            <div class="mini-box mini-box-active">
                餐饮行业内容
            </div>
            <div class="mini-box">
                家具行业内容
            </div>
            <div class="mini-box">
                服务行业内容
            </div>
            <div class="mini-box">
                旅游行业内容
            </div>
            <div class="mini-box">
                建材行业内容
            </div>
            <div class="mini-box">
                互联网/IT行业内容
            </div>

        </div>
        <div class="item-box">
            <ul>
                <li class="">
                    <span>2餐饮行业</span>
                </li>
                <li>
                    <span> 2家具行业</span>
                </li>
                <li>
                    <span>2服务行业</span>
                </li>
                <li>
                    <span>2旅游行业</span>
                </li>
                <li>
                    <span>2建材行业</span>
                </li>
                <li>
                    <span>2互联网/IT行业</span>
                </li>
            </ul>
            <div class="mini-box">
                餐饮行业内容
            </div>
            <div class="mini-box">
                家具行业内容
            </div>
            <div class="mini-box">
                服务行业内容
            </div>
            <div class="mini-box">
                旅游行业内容
            </div>
            <div class="mini-box">
                建材行业内容
            </div>
            <div class="mini-box">
                互联网/IT行业内容
            </div>

        </div>
        <div class="item-box">
            <ul>
                <li class="">
                    <span>3餐饮行业</span>
                </li>
                <li>
                    <span> 3家具行业</span>
                </li>
                <li>
                    <span>3服务行业</span>
                </li>
                <li>
                    <span>3旅游行业</span>
                </li>
                <li>
                    <span>3建材行业</span>
                </li>
                <li class="more">
                    <span>更多行业</span>
                </li>
            </ul>
            <div class="mini-box">
                餐饮行业内容
            </div>
            <div class="mini-box">
                家具行业内容
            </div>
            <div class="mini-box">
                服务行业内容
            </div>
            <div class="mini-box">
                旅游行业内容
            </div>
            <div class="mini-box">
                建材行业内容
            </div>
            <div class="mini-box">
            </div>

        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(function(){
            $('li').click(function(){
                let index = $(this).index();
                // console.log(index)
                //当前li添加上类名，当前行的其他li移除类名
                $(this).addClass('li-active').siblings().removeClass('li-active')
                // 当前行li对行的内容显示，其他内容隐藏
                $(this).parents('ul').siblings('.mini-box').eq(index).show().siblings('.mini-box').hide()
                // 添加当前li的类名，移除其他行的所有li类名
                $(this).parents('.item-box').siblings('.item-box').find('li').removeClass('li-active')
                //当前行的mini-box收起，其他行的下拉
                $(this).parents('.item-box').siblings('.item-box').find('.mini-box').slideUp()
            })
            $('.more').click(function(){
                // console.log($(this).index())   //5
                $(this).parents('ul').siblings('.mini-box').slideUp()
            })
        })
    </script>
</body>

</html>

在这里插入图片描述

标签：box,mini,菜单,index,JQ,li,内容,联动,siblings
来源： https://blog.csdn.net/qq_45695853/article/details/116299219