使用jQuery制作点击展开次级菜单的简单方法

最新推荐文章于 2023-11-21 11:59:43 发布

方片酱

最新推荐文章于 2023-11-21 11:59:43 发布

阅读量963

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript css html

本文链接：https://blog.csdn.net/weixin_47691105/article/details/106062786

版权

本文介绍了如何使用jQuery创建点击展开的次级菜单。通过HTML结构、CSS样式和jQuery代码，实现了菜单的交互功能。菜单在展开时不会影响页面整体布局，且具有自动关闭二级菜单的特性。建议在实际项目中使用更有意义的类名。

摘要由CSDN通过智能技术生成

首先是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <link rel="stylesheet" href="css/menu.css">
</head>
<body>
    <div class="all">
        <ul class="one">
            <li id="firstPage">
                <a href="menu.html" target="_self">首页</a>
            </li>
            <li><a href="#">商品管理</a>
                <ul class="two active">
                    <li ><a href="#">商品列表</a>
                        <ul class="three active1">
                            <li><a href="#">修改商品</a></li>
                            <li><a href="#">删除商品</a></li>
                        </ul>
                    </li>
                    <li ><a href="#">添加商品</a></li>
                    <li ><a href="#">分类管理</a>
                        <ul class="three active1">
                            <li><a href="#">类别分类</a></li>
                            <li><a href="#">商家分类</a></li>
                        </ul>