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

  • 相关阅读:
    【妖精眼镜】
    神兽保佑-代码无BUG
    Eclipse常用快捷键 及 不格式化注释
    Android dialog 全屏
    eclipse 改变颜色,背景
    GOOGLE和百度的长域名
    Android在ArrayAdapter<>里如何得到List<>的Items
    Android 仿微信朋友圈发动态功能(相册图片多选)
    Android 让GridView的高度为Wrap_content根据内容自适应高度
    C++中函数的返回值
  • 原文地址:https://www.cnblogs.com/iriliguo/p/7134393.html
Copyright © 2011-2022 走看看