JS-2级菜单的点击选中，展开闭合效果

最新推荐文章于 2025-03-27 15:33:54 发布

菜鸟风

最新推荐文章于 2025-03-27 15:33:54 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_43935061/article/details/127507787

版权

本文介绍了如何使用JavaScript实现二级菜单的点击选中和展开闭合效果。在需求分析中，需要为具有2级子菜单的菜单添加点击事件，初始状态下展示子菜单样式，并在展开后默认选中第一个子菜单。通过循环处理，实现了菜单的选中和展开逻辑，代码中详细注释了每一步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

一个菜单，具有2级子菜单，添加点击事件，并且初始添加具有子菜单的样式,展开子菜单后，默认选中第一个菜单

产出物：

gif显示不全，可以运行代码查看
请添加图片描述

分析：

从需求中，我们可以分析出，我们做的效果包括：

初始化处理二级菜单（添加hasChild）
二级菜单展开：
```
 有选中的话选中原来的项目
```

 没有选中的话默认选中第一个

点击项目添加选中效果（也可以不添加，随着要求修改）

菜单的选中操作，我们需要考虑到循环，因此我们可以写个初始版的循环函数来作为底子

效果如图：

请添加图片描述

代码参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #demo  li { font-size:20px; line-height:1.5; padding:10px 0; cursor:pointer; }
        #demo  li.selected { background:#ff0000; }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <ul id='demo'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script type="text/javascript">
        //JQ方法，选中后，其余兄弟元素取消样式
        /*$(function(){
            $('#demo li').click(function(){
                $(this).addClass('selected').siblings().removeClass('selected')
            })
        })*/
         
        //JS方法，选中后，其余兄弟元素取消样式
        let dom = document.querySelectorAll('li');
        dom.forEach((item, itemIndex)=>{
            item.addEventListener('click', function(){
                /* 写法1,全部取消选中，再选中当前项
                dom.forEach(li=>{
                    li.classList.remove('selected');
                })
                item.classList.add('selected')
                */
                 
                /* 写法2, 索引值判断，根据索引值循环每个li */
                dom.forEach((li, liIndex)=>{
                    if(liIndex === itemIndex){
                        li.classList.add('selected')
                    } else {
                        li.classList.remove('selected');
                    }
                })

最低0.47元/天解锁文章