更多，展开菜单
Posted 四仰八叉的怪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更多，展开菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.slider-list-wraper {
background-color: #fff;
display: flex;
align-items: baseline;
padding: 15px 0;
padding-left: 30.5px;
width: 800px;
}
.slider-list-wraper + .slider-list-wraper {
border-top: solid 0.5px #dcdcdc;
}
.slider-list-wraper .title {
font-size: 14px;
color: #333333;
width: 120px;
white-space: nowrap;
display: flex;
align-items: center;
}
.slider-list-wraper .title span {
font-size: 16px;
color: #169e71;
}
.industry_slider_list .option_line .option_one.this {
color: #009b73;
border: none;
position: unset;
}
.option_line {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 89%;
/* overflow: hidden; */
/* max-height: 20px; */
/* overflow: hidden; */
}
.option_line .option_line_warp {
display: flex;
align-items: center;
width: 80%;
overflow: hidden;
/* flex-wrap: wrap ; */
max-height: 20px;
overflow: hidden;
}
.option_line .show_menu {
flex-wrap: wrap;
max-height: none;
height: auto;
}
.option_line .show_menu .option_one {
margin-bottom: 10px;
}
.option_line .more_show_btn {
cursor: pointer;
display: flex;
align-items: center;
font-size: 12px;
color: #333;
background-color: #fff;
margin: 0 2px;
border: 1px solid #e1e4eb;
padding: 0 4px;
border-radius: 4px;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.option_line .more_show_btn img {
width: 12px;
margin-right: 2px;
}
.option_line .more_show_btn.more_show_btn2 {
display: none;
border-color: #009b73;
color: #009b73;
}
.option_line .option_one {
display: flex;
align-items: center;
font-size: 12px;
letter-spacing: 0px;
color: #333333;
margin-right: 5px;
border-radius: 13.3px;
padding: 4px 14px;
cursor: pointer;
white-space: nowrap;
}
.option_line .option_one img {
width: 100%;
}
.option_line .option_one .ruchang {
border-radius: 8.8px;
margin-right: 6.5px;
}
.option_line .option_one .ruchang img {
width: 18.5px;
border: solid 0.5px #c1c1c1;
height: 18px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="slider-list-wraper industry_slider_list">
<div class="title">标题 <span></span></div>
<div class="option_line">
<div class="option_line_warp">
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项选项选项选项选项
</div>
<div class="option_one industry_id" style="padding: 1.5px 5px">
选项
</div>
</div>
<div class="more_show_btn more_show_btn1">更多</div>
<div class="more_show_btn more_show_btn2">收起</div>
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
var num = 1;
$(".more_show_btn").click(function () {
num++;
console.log(num);
if (num % 2 == 0) {
$(".option_line .option_line_warp").addClass("show_menu");
$(".more_show_btn2").show();
$(".more_show_btn1").hide();
} else {
$(".option_line .option_line_warp").removeClass("show_menu");
$(".more_show_btn1").show();
$(".more_show_btn2").hide();
}
});
});
</script>
以上是关于更多，展开菜单的主要内容，如果未能解决你的问题，请参考以下文章