利用jQuery实现三级侧边导航栏

实现侧边导航栏效果，导航栏一共含有三级目录，点击父标题可上下收展其他子标题，记录自己用过的一种写法，主要用jQuery实现。
实现效果图：

具体代码如下:

HTML布局

<div class="content">
<div class="content_left">
<div class="left_title">  LOGO
</div>
<!-- 每一个菜单项 -->
<div class="menu">
<div class="menu-title">一级菜单</div>
<ul class="menu-content">
<li class="two">二级菜单</li >
<ul class="menu-content-third">
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
</ul>
<li >二级菜单</li>
<li >二级菜单</li>               </ul>        </div>        <div class="menu">            <div class="menu-title">一级菜单</div>                <ul class="menu-content">                   <li >二级菜单</li>                    <li >二级菜单</li>                    <li >二级菜单</li>                </ul>        </div>      </div>    <div class="content_right"> 内容区域 </div></div>

CSS样式

*{
padding: 0;
margin: 0;
cursor: default;
}
li{
list-style: none;
}
.content{
width: 100%;
height: 100%;
}
.content_left{
width: 19%;
height: 600px;
border: 1px solid #000000;
float: left;
}
.content_right{
width: 80.8%;           height: 600px;           background-color: antiquewhite;            float: right;         }
.left_title{
height: 50px;
width: 100%;
text-align: center;
line-height: 50px;
background-color: aquamarine;
}
.menu{
width: 100%;
text-align: center;
}
.menu-title{      height: 25px;
margin-right: 40px;
cursor: pointer;
}
.content-content{
display: block;     }
.menu-content li:hover{
background-color: azure;         cursor: pointer;      }    .menu-content-third{
margin-left: 40px;
display:none;     }

jQuery代码

$(function(){
//第一步，隐藏子菜单项//找到每一个菜单项，用each循环
$(".menu").each(function(){
$(this).children(".menu-content").hide();
});
//给所有的主标题添加点击事件
$(".menu-title").each(function(){       $(this).click(function(){            //弹出当前主标题下的子标题列表
var mList=$(this).parents(".menu").children(".menu-content");
//展开、收起导航栏
mList.slideToggle();
});
});
//找到二级标签，给他注册点击事件，收展它下面的三级标题组
$(".two").click(function(){
$(".two").next().slideToggle();
});
})

利用jQuery实现三级侧边导航栏相关推荐

【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
侧边导航栏代码css,【源码分享】jquery+css实现侧边导航栏(示例代码)
1 2 3 /*重置一些样式*/ 4 *, *::after, *::before{ 5 box-sizing:border-box; 6 /*padding: 0;*/ 7 margin:0; 8 ...
利用layui实现侧边导航栏
主要利用element模块插件实现侧边导航栏第一种展示的侧边导航栏是依据菜单展示的内容来展示其背景样式的 <link rel="stylesheet" type=" ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
你好，SegmentFault 新导航【开发手册】; 再见，侧边导航栏
SegmentFault 在夏季上线了 SegmentFault 5.0 版本,迭代了整个主站的样式,在 8 月的时候上线了面板九宫格(侧边导航栏),整合了部分的入口,方便用户查看笔记.徽章和排行榜等 ...

利用jQuery实现三级侧边导航栏

利用jQuery实现三级侧边导航栏相关推荐

最新文章

热门文章