image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css">
<style media="screen">
dd+dt {
margin-top: 0;
}
#menu-list li.cur {
/* 点击出现蓝色边框 */
background-color: #eee;
border-left: 4px solid #3078EA;
margin-left: -4px;
}
</style>
</head>
<body>
<div id="menu-list">
<h4>常见问题分类</h4>
<dl>
<dt>
一年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li class="cur">一年一班</li>
<li>一年二班</li>
</ul>
</dd>
<dt>
二年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li>二年一班</li>
<li>二年二班</li>
<li>二年三班</li>
</ul>
</dd>
<dt>
三年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li>三年一班</li>
<li>三年二班</li>
</ul>
</dd>
</dl>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var $menuDt = $('#menu-list dt');
// <!-- 下拉闷蛋 + 图标 -->
$menuDt.siblings('dd').hide();
$menuDt.on('click', function() {
if ($(this).next('dd').is(':visible')) {
$(this).next('dd').slideUp();
$(this).find('i').attr('class', 'am-icon-chevron-down');
} else {
$(this).next('dd').slideDown().siblings('dd').slideUp();
$(this).find('i').attr('class', 'am-icon-chevron-up');
$(this).siblings('dt').find('i').attr('class', 'am-icon-chevron-down');
}
})
// <!-- li 点击出现蓝色边框 -->
var $menuLi = $('#menu-list li');
$menuLi.on('click', function() {
$(this).parents('#menu-list').find('li').removeClass('cur');
$(this).addClass('cur');
})
</script>
</body>
</html>
没有箭头的简易版
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<dl>
<dt>
一年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li class="cur">一年一班</li>
<li>一年二班</li>
</ul>
</dd>
<dt>
二年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li>二年一班</li>
<li>二年二班</li>
<li>二年三班</li>
</ul>
</dd>
<dt>
三年级
<i class="am-icon-chevron-down"></i>
</dt>
<dd>
<ul>
<li>三年一班</li>
<li>三年二班</li>
</ul>
</dd>
</dl>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// 第一步，都隐藏
$('dd').hide();
// 第二步。点击事件。IF判断是否隐藏，出现俩种不同结果
$('dt').on('click', function() {
if ($(this).next('dd').is(':visible')) {
$(this).next('dd').slideUp();
} else {
$(this).next('dd').slideDown().siblings('dd').slideUp();
}
})
// next() 后面第一个亲兄弟
</script>
</html>