• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery实现二级侧边导航菜单

武飞扬头像
代森森
帮助1


效果

学新通

步骤

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>

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhhckgh
系列文章
更多 icon
同类精品
更多 icon
继续加载