Web前端--折叠菜单（Jquery版）

最新推荐文章于 2025-03-22 23:14:35 发布

Hello world

最新推荐文章于 2025-03-22 23:14:35 发布

阅读量2.7k

点赞数

本文链接：https://blog.youkuaiyun.com/helloWolrldApe/article/details/88925166

版权

本文介绍了如何使用Jquery实现Web前端的折叠菜单功能，包括展示实现效果和具体代码细节，帮助开发者理解并应用到自己的项目中。

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

Web前端–折叠菜单（Jquery版）

先上效果图

在这里插入图片描述
背景可以自己设置。
以下是代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            list-style:none;
            width: 300px;
            margin: 100px auto;

        }
        .nav>li{
            border: 1px solid #000;
            line-height: 35px;
            border-bottom:none;
            text-indent: 2em;
            position: relative;

        }
        .nav>li:last-child{
            border-bottom: 1px solid #000;
            border-bottom-right-radius:10px;
            border-botto

最低0.47元/天解锁文章