前端入门（自留）——jquery列表的收展利用jquery对象方法，实现导航栏标题和子分类的展示。点击对应的标题显示该标

相关知识

jquery方法	参数	返回值	作用	例子
click	[data,]function()	返回当前jQuery对象本身	绑定对象被点击的处理事件	$('.title').click(function(){...}
next	选择器（空表示下一个元素）	单个jquery对象	选择当前元素后最近的匹配元素	$('.title').next('ul')
find	选择器（空表示所有后代）	jquery对象数组	当前元素集合中每个元素符合条件的后代	$('dd').find('ul')
slideup	[speed速度,easing效果,callback回调函数]		使用滑动效果，隐藏被选元素	$('ul').slideup("fast","linear")
slidedown	[speed速度,easing效果,callback回调函数]		使用滑动效果，显示隐藏的被选元素	$('ul').slidedown("slow","swing")
children	选择器（空表示所有子元素）	jquery对象数组	选定元素的所有子元素	$('ul').children()
first	选择器（空表示第一个元素）	单个jquery对象	获取匹配的第一个元素	$('li').first()
addClass	样式名	返回添加类的选定元素	为选定元素添加类	$('li').addClass('active')
removeClass	样式名	返回移出类的选定元素	为选定元素移出类	$('li').removeClass('active')
is	过滤选择器	boolean值	判断当前对象是否符合指定表达式	is(":visible")表示该元素的可见性

页面效果

导航栏八个标题，每个标题下有三个子分类（后四个标题省略了分类）。

初始时默认选择第一个标题，显示该标题下的子分类，默认选择第一个子分类。

点击其他标题，当前标题会滑动隐藏，并滑动显示所点击标题的子分类，默认选择第一个子分类。点击其他分类切换选择。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery-menulist</title>
    <link rel="stylesheet" href="../css/jquery-menulist.css">
    <script type="text/javascript" src="../js/jquery-3.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 点击分类title，对分类列表进行展开或收回
            $('.title').click(function () {
                var $ul = $(this).next('ul');
                $('dd').find('ul').slideUp();
                // 已展开：收回，并取消选中子分类
                if ($ul.is(":visible")) {
                    $ul.slideUp();
                    $ul.children('li.active').removeClass('active');
                }
                // 未展开：展开，默认选中第一个子分类
                else {
                    $ul.slideDown();
                    $ul.children('li').first().addClass('active');
                }
            })

            // 子分类导航切换
            $(".menuson li").click(function () {
                $(".menuson li.active").removeClass('active');
                $(this).addClass('active');
            });
        })
    </script>
</head>

<body style="background: #f0f9fd;">
    <div class="lefttop">功能菜单</div>
    <div class="leftmenu">
        <dd>
            <div class="title">购物后台管理</div>
            <ul class="menuson">
                <li class="active"><a href="#">添加商品</a></li>
                <li><a href="#">商品列表</a></li>
                <li><a href="#">商品类型</a></li>
            </ul>
        </dd>
        <dd>
            <div class="title">影视后台管理</div>
            <ul class="menuson">
                <li><a href="#">添加影片</a></li>
                <li><a href="#">影片列表</a></li>
                <li><a href="#">影片类型</a></li>
            </ul>
        </dd>
        <dd>
            <div class="title">餐饮后台管理</div>
            <ul class="menuson">
                <li><a href="#">添加美食</a></li>
                <li><a href="#">美食列表</a></li>
                <li><a href="#">美食类型</a></li>
            </ul>
        </dd>
        <dd>
            <div class="title">订单管理</div>
            <ul class="menuson">
                <li><a href="#">最新订单</a></li>
                <li><a href="#">已处理订单</a></li>
                <li><a href="#">取消订单</a></li>
            </ul>
        </dd>
        <dd>
            <div class="title">统计报表</div>
        </dd>
        <dd>
            <div class="title">权限分配</div>
        </dd>
        <dd>
            <div class="title">修改密码</div>
        </dd>
        <dd>
            <div class="title">系统设置</div>
        </dd>
    </div>
</body>

</html>

* {
    font-size: 9pt;
    border: none;
    padding: 0;
    margin: 0;
    color: black;
    text-align: center;
}

body{
    margin: 20px;
}

ul, li {
    list-style: none;
}

a, a:focus {
    text-decoration: none;
}

a:hover {
    color: #00a4ac;
}

.lefttop {
    font-size: 16pt;
    height: 40px;
    line-height: 40px;
    background-color: #00b8c1b6;
    width: 150px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #b7d5df;
}

.leftmenu{
    width: 150px;
    border: 1px solid #b7d5df;
    border-radius: 0 0 10px 10px;
}

.leftmenu dd{
    line-height: 40px;
    border-top: 1px solid #b7d5df;
}

.leftmenu dd:first-child{
    border-top: none;
}

.title{
    font-size: 13pt;
    cursor: pointer;
}

/* 初始化回收所有分类列表 */
.leftmenu dd .menuson{
    display: none;
}

/* 显示第一个分类列表 */
.leftmenu dd:first-child .menuson{
    display: block;
}

.menuson{
    line-height: 30px;
}

.menuson li a{
    cursor: pointer;
    font-weight: bold;
    font-size: 11pt;
}

/* 子分类导航选中变色 */
.menuson li.active{
    position: relative;
    line-height: 30px;
    background-color: antiquewhite;
}