问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

点击切换内容的显示隐藏？

头像
GuoWenqing
    8210

    问题描述

    点击上面的div切换下面div中的内容，请问一下这种应该怎么去实现？
    image.png

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    粘贴代码文本（请勿用截图）

    你期待的结果是什么？实际看到的错误信息又是什么？

    前端javascriptcss3
    阅读 2.9k
    2 个回答
    得票最新
    头像
    Coisini
      92317
      ✓ 已被采纳

      这是你想要的效果吗？？

      <!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>
      头像
      linong
        29.2k1266132

        jq？vue？react？ng？

        大概率是数据上就是一个嵌套关系的，这样当你点击的时候，你就把对应 children 渲染出来即可

        [
    {title: '文本引擎'},
    {title: '智能听见系统',children:[{title: '合同文档自动解析'}]}
]

        当然，为了实现方便，你可以对上述的数据，进行一下分组，比如说五个一组+一个children展示区域

        当然也可以直接加个大 margin，然后 absolute

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题