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

时间： 2024-12-13 00:08:08

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果的相关文章

如果自定义一个可以点击之后展开/收缩的菜单组件

首先,定义布局文件,如下 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_alignParentBottom="true

在wordpress主题下面添加二级菜单

首先在主题下面新建一个目录,命名为INC,然后新建一个theme-options.php文件,文件内容如下: <?php function init() { //可以在这里处理表单相关的内容 add_theme_page( "主题选项", "主题选项", 'edit_plugins', basename( __FILE__ ), 'display' ); } function display() { ?> <div> <nav>可

一级菜单二级菜单的联动

1.页面代码:单个集合循环生成一级和二级菜单 /* <c:forEach var="m" items="${list}" > <c:if test="${m.mb.father eq '-1' }"> <input type="checkbox" name="me

鼠标事件-二级菜单

1.用到的包和方法需求导入ActionChains包: from selenium.webdriver.common.action_chains import ActionChains 2.需求鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表.以百度首页"更多产品"--"糯米"为例. 3.代码实现 1 # encoding=utf-8 2 from selenium import webdriver 3 from se

js实现二级菜单显示和收缩

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=

第十五篇 JS 移入移出事件模拟一个二级菜单

JS 移入移出事件模拟一个二级菜单老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

css实现二级菜单显示和收缩

<ul class="nav"> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <l

点击弹出动态菜单效果ios源码

这是一个点击弹出动态菜单效果,源码SphereMenuSwift,SphereMenuSwift使用 UIDynamicAnimator做的动态菜单.点击按钮弹出菜单.菜单可以拖拽.模拟碰撞物理效果,这是用Swift写的项目.效果图: <ignore_js_op> 使用方法: 代码的实现: override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) self.view.b

JavaScript内容梳理示例之模态对话框示例之全选和反选以及取消示例之后台管理左侧菜单

1 <!DOCTYPE html> 2  3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .c1{ 12 position: fixed; 13 lef