点击切换内容的显示隐藏？
站长
· 阅读数 6
问题描述
点击上面的div切换下面div中的内容，请问一下这种应该怎么去实现？
问题出现的环境背景及自己尝试过哪些方法
相关代码
粘贴代码文本（请勿用截图）
你期待的结果是什么？实际看到的错误信息又是什么？
回复
1个回答
test
2024-06-28
这是你想要的效果吗？？
<!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>回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容