jQuery实现二级侧边导航菜单

代森森

已于 2022-08-19 08:58:49 修改

阅读量1.8k

点赞数 4

分类专栏：案例向文章标签： javascript jquery 前端

于 2022-03-21 19:39:19 首次发布

本文链接：https://blog.youkuaiyun.com/ovocc/article/details/123636597

版权

jQuery 滑动效果导航栏 CSS样式 HTML结构

关键词由优快云通过智能技术生成

案例向专栏收录该内容

15 篇文章

订阅专栏

该博客详细介绍了如何利用jQuery实现一个固定在左侧的侧边栏导航栏，通过点击标题实现子菜单的滑动显示和隐藏。涉及到HTML结构、CSS样式以及jQuery代码的编写，为读者提供了一种动态导航栏的实现方法。

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

效果
步骤

效果

请添加图片描述

步骤

1.准备相关插件

下载jQuery.js和放在目标目录下
在这里插入图片描述

2.导入相关插件

  <script src="js/jquery.min.js"></script>

3.相关代码

html代码

  <div class="nav">
        <div class="title">
            <span>IT培训</span>
            <ul>
                <li>网页制作</li>
                <li>java</li>
                <li>室内设计</li>
                <li>玩具设计</li>
            </ul>
        </div>
        <div class="title">
            <span>技能学习</span>
            <ul>
                <li>SEO</li>
                <li>网络营销</li>
                <li>平面设计</li>
                <li>淘宝美工</li>
                <li>office办公</li>

            </ul>
        </div>
        <div class="title">
            <span>语言学习</span>
            <ul>
                <li>英语</li>
                <li>日语</li>
                <li>西班牙语</li>
                <li>韩语</li>
            </ul>
        </div>
        <div class="title">
            <span>兴趣爱好</span>
            <ul>
                <li>人际关系</li>
                <li>体育竞技</li>
                <li>健身舞蹈</li>
                <li>美食探店</li>
            </ul>
        </div>
    </div>

css代码

        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 15%;
            height: 745px;
            background-color: rgb(32, 32, 32);
        }
               
        ul {
            display: none;
            list-style: none;
        }
        
        li {
            padding-left: 30px;
            width: 100%;
            height: 40px;
            color: white;
            line-height: 40px;
            background-color: rgb(65, 65, 65);
            border-bottom: 1px solid rgb(78, 78, 78);
        }
        
        span {
            display: block;
            width: 100%;
            height: 40px;
            color: white;
            line-height: 40px;
            border-top: 1px solid rgb(78, 78, 78);
            border-bottom: 1px solid rgb(78, 78, 78);
        }
        
        .current {
            background-color: rgb(68, 137, 241);
        }

jQuery代码

    <script>
        $(function() {
            $("ul").stop().slideUp();
            $(".title").on("click", function() {
                $(this).find("span").stop().toggleClass("current");
                $(this).siblings(".title").find("span").removeClass("current");
                $("ul").stop().slideUp();
                $(this).find("ul").stop().slideToggle();
            });
        });
    </script>