原生Jquery 实现多级下拉列表

大家好，我是顾倾歌！最近刚好有个项目需要使用原生实现此功能，因此梳理一番。

需求

点击显示隐藏，不影响其他的显示与隐藏 切换时修改图标样式

实现

js代码

// 下拉一级列表选择
function changeMatch(type,_this){
	if($(_this).hasClass('active')) {
		// 获取右箭头的元素
		const children = $(_this).children()
		// 修改右箭头元素样式
		$(children).css('transform','rotateZ(90deg)')
		$(_this).removeClass('active')
		
		// 获取当前下拉列表元素
		const nextList = $(_this).nextAll()
		// 显示列表元素
		if(nextList.hasClass('active')) {
			$(nextList).css('display','block')
			$(nextList).removeClass('active')
		}
	}else {
		// 获取右箭头的元素
		const children = $(_this).children()
		// 修改右箭头元素样式
		$(children).css('transform','rotateZ(0deg)')
		$(_this).addClass('active')
		
		// 获取当前下拉列表元素
		const nextList = $(_this).nextAll()
		// 隐藏列表元素
		if(!nextList.hasClass('active')) {
			$(nextList).css('display','none')
			$(nextList).addClass('active')
		}
	}
}

// 下拉列表二级
function changeSeason(type,_this){
	if($(_this).hasClass('active')) {
		// 获取加减号的元素
		const children = $(_this).children()
		// 修改加减号元素样式
		$(children[0]).css('display','none')
		$(children[1]).css('display','block')
		$(_this).removeClass('active')
		
		// 获取当前下拉列表元素
		const nextList = $(_this).nextAll()
		// 显示列表元素
		if(nextList.hasClass('active')) {
			$(nextList).css('display','block')
			$(nextList).removeClass('active')
		}
	}else {
		// 获取加减号的元素
		const children = $(_this).children()
		// 修改加减号元素样式
		$(children[0]).css('display','block')
		$(children[1]).css('display','none')
		$(_this).addClass('active')
		
		// 获取当前下拉列表元素
		const nextList = $(_this).nextAll()
		// 隐藏列表元素
		if(!nextList.hasClass('active')) {
			$(nextList).css('display','none')
			$(nextList).addClass('active')
		}
	}
}

逻辑

通过点击事件获取当前的元素，然后拿取当前的子元素对其进行隐藏或者显示，拿取当前的图标并对其进行修改样式，功能很简单。 二级列表同理。

HTML代码

<!-- 赛事下拉列表 -->
<div class="navbar_data">
    <div class="navbar_list">
	<!-- 一级列表 -->
	<div class="navbar_item">
            <div class="navbar_title" onclick="changeMatch(1,this)">
		快速
		<span class="iconfont icon-you" style="transform: rotateZ(90deg);"></span>
            </div>
            <div class="navbar_select">
		<!-- 二级列表 -->
		<div class="select_match">
                    <div class="match_box" onclick="changeSeason(1,this)">
			<span class="iconfont icon-jiahao" style="display: none;"></span>
			<span class="iconfont icon-jianhao" style="display: block;"></span>
			关注赛事
                    </div>
		<div class="match_info">
                    <a href="./data_season.html" target="_blank">
			<div class="info_item">
                            世亚预
                            <span class="iconfont icon-shoucang"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            世欧预
                            <span class="iconfont icon-shoucang"></span>
                        </div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            欧冠杯
                            <span class="iconfont icon-shoucang"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item">
                            英超
                            <span class="iconfont icon-shoucang"></span>
                        </div>
                     </a>
		</div>
            </div>
            <!-- 二级列表 -->
            <div class="select_match">
		<div class="match_box" onclick="changeSeason(2,this)">
                    <span class="iconfont icon-jiahao" style="display: none;"></span>
                    <span class="iconfont icon-jianhao" style="display: block;"></span>
                    热门赛事
		</div>
                <div class="match_info">
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            世亚预
                            <span class="iconfont icon-shoucang"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
                        <div class="info_item" >
                            世欧预
                            <span class="iconfont icon-shoucang"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
                        <div class="info_item">	
                            欧冠杯
                            <span class="iconfont icon-start"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item">
                            英超
			</div>
                    </a>
		</div>
            </div>
	</div>
    </div>
    <div class="navbar_item">
	<div class="navbar_title active" onclick="changeMatch(2,this)">
            国际
            <span class="iconfont icon-you"></span>
	</div>
	<div class="navbar_select active" style="display: none;">
            <div class="select_match">
		<div class="match_box active" onclick="changeSeason(1,this)">
                    <span class="iconfont icon-jiahao"></span>
                    <span class="iconfont icon-jianhao"></span>
                    国际赛事
		</div>
                <div class="match_info active" style="display: none;">
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            世亚预
                            <span class="iconfont icon-start"></span>
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            世欧预
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item" >
                            欧冠杯
			</div>
                    </a>
                    <a href="./data_season.html" target="_blank">
			<div class="info_item">
                            英超
			</div>
                    </a>
                </div>
            </div>
	</div>
    </div>

CSS代码

   .navbar_data {
	display: flex;
	flex-direction: column;
	width: 220px;
}
.navbar_list {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 0 2px 3px 0 rgb(0 0 0 / 8%);
}
.navbar_item {
	font-weight: bold;
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select:none; 
	border-bottom: 1px solid #f6f6f6;
}
.navbar_title {
	display: flex;
	align-items: center;
	height: 50px;
	font-size: 14px;
	padding: 0 15px;
	color: #DE1E30;
	justify-content: space-between;
	cursor: pointer;
}
.navbar_title .active.icon-you{
	transform: rotate(50deg);
}
.select_logo {
	width: 15px;
	height: 15px;
	margin-right: 3px;
	background-size: contain;
	background-repeat: no-repeat;
}
.select_match {
	padding: 0;
}
.select_match .icon-jiahao {
	font-size: 12px;
	margin-right: 7px;
	font-weight: bold;
	color: #CACACA;
}
.select_match .icon-jianhao {
	font-size: 12px;
	margin-right: 7px;
	font-weight: bold;
	display: none;
	color: #CACACA;
}
.navbar_select {
	font-size: 12px;
	font-weight: 200;
}
.match_box {
	height: 35px;
	padding: 0 15px;
	display: flex;
	align-items: center;
	color: #0c0c0c !important;
	border-bottom: 1px solid #f6f6f6;
	cursor: pointer;
}
.match_info a{
	width: 100%;
}
.info_item {
	padding: 10px 8px 10px 35px;
	display: flex;
	justify-content: space-between;
	color: #828282;
	border-bottom: 1px solid #f6f6f6;
}
.info_item .icon-shoucang {
	color: #cacaca;
	display: none;
	font-size: 12px;
}
.info_item .icon-shoucang:hover {
	color: #ffd430;
	font-size: 12px;
}
.info_item:hover {
	background-color: #fff3f4;
}
.info_item:hover .icon-shoucang {
	display: block;
}

效果图

文笔不怎么样，谅 新人发布。