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实现这种竖直手风琴菜单真的容易好多。

  • 相关阅读:
    一个体验好的Windows 任务栏缩略图开发心得
    扫脸动画
    ShimmerTextView
    201512-2 消除类游戏 (水题,暴力)
    CCF 201512-1 数位之和 (水题)
    UVa 557 Burger (概率+递推)
    CCF 201604-2 俄罗斯方块 (模拟)
    CCF 201604-1 折点计数 (水题,暴力)
    UVa 10213 How Many Pieces of Land ? (计算几何+大数)
    UVa 1641 ASCII Area (计算几何,水题)
  • 原文地址:https://www.cnblogs.com/iriliguo/p/7134393.html
Copyright © 2011-2022 走看看