微客导航 » 文章资讯 » jquery实现垂直手风琴导航栏

jquery实现垂直手风琴导航栏

2023-08-01 02:16:04 150

本文实例为大家分享了jquery实现垂直手风琴导航栏的具体代码，供大家参考，具体内容如下

做项目时第一次做垂直手风琴导航栏便记录下来
使用jQuery更简单
扩展浏览器支持本例采用jQuery1.12.4版

前端HTML：











一级菜单

二级菜单


一级菜单

>二级菜单
>二级菜单


一级菜单

>二级菜单

CSS样式:

.middl{
width:100%;
height:auto;
background-color:#ADD8E6;
}

.nav{
list-style:none;
width:100%;
}

.nav>li{
width:100%;
height:auto;
font-size:24px;
text-indent:1em;/*缩进1个字符*/
position:relative;
background-color:#ADD8E6;
color:#f8f8ff;
cursor:pointer;
}
/*默认不显示二级菜单*/
.sub{
display:none;
}

.sub>li{
list-style:none;/*去掉小圆点*/
width:100%;
height:50px;
line-height:50px;
font-size:24px;
text-indent:2em;/*缩进2个字符*/
background-color:#e6e6fa;
color:#000;
cursor:pointer;/*鼠标手势*/
}

引入jQuery：

$(function(){
//点击展开当前二级菜单
//1.监听一级菜单的点击事件
$(".nav>li").click(function(){
//1.1拿到二级菜单
var$sub=$(this).children(".sub");
//1.2让二级菜单展开
$sub.slideDown(500);
//1.3拿到所有非当前的二级菜单
//varotherSub=$(this).siblings().children(".sub");
////1.4让所有非当前的二级菜单收起
//otherSub.slideUp(500);
});

//双击关闭当前二级菜单
$(".nav>li").dblclick(function(){
var$sub=$(this).children(".sub");
$sub.slideUp(500);
})
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jquery实现垂直手风琴导航栏

热门推荐

随机推荐