zoukankan      html  css  js  c++  java
  • jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

    html:

    <div class="col-sm-3 col-md-2 sidebar">
        <div class="totalt"><a>系统管理系统</a></div>
        <ul class="menu">
            <li class="title">
    
                <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理
                </a>
    
    
                <ul class="content">
                    <li> <a class="item item2"  href="right5.html" target="right" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a>
                    </li>
                    <li>  <a class="item item2" href="right.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
                    <li> <a class="item item2" href="right2.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
    
                </ul>
            </li>
            <li class="title ">
    
                <a class=" item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理
                </a>
    
                <ul class="content">
                    <li> <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a>
                    </li>
                    <li> <a class="item item2" href="#"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
                    <li> <a class="item item2" href="#"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
    
                </ul>
            </li>
    
            <li class="title">
    
                <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理
                </a>
    
                <ul class="content">
                    <li>
                        <a class="item item2" href="#" >
                            <span class="glyphicon glyphicon-step-backward "></span>账号管理
                        </a>
                    </li>
                    <li>  <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
                    <li> <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a></li>
    
                </ul>
            </li>
    
        </ul>
    
    </div>

    js:

    $(".title .item1").click(function(){
        $(this).next(".content").slideToggle();//实现二级菜单的展开收缩功能
        $(this).find("span").toggleClass("glyphicon glyphicon-chevron-down");//实现菜单点击时图标的转换效果
        $(this).find("span").toggleClass("glyphicon glyphicon-chevron-right");
    })

    css就不贴了,用jquery实现这种竖直手风琴菜单真的容易好多。

  • 相关阅读:
    戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录
    socketpair的使用
    上传App时遇IDFA错误问题
    1-4标签的语法
    TCP协议中的三次握手和四次挥手(图解)
    TsFltMgr.sys系统蓝屏的原因就在于QQ电脑管家!
    STL vector使用方法介绍
    史上最强视频站点真实地址解析
    .NET 使用 MySql.Data.dll 动态库操作MySql的帮助类--MySqlHelper
    ASP.NET——验证码的制作
  • 原文地址:https://www.cnblogs.com/iriliguo/p/7134393.html
Copyright © 2011-2022 走看看