竖直手风琴导航菜单栏

之前有用原生js实现了菜单栏的展开收缩效果，今天用jquery实现这个效果，

并增加了鼠标点击箭头方向改变的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.2.0.min.js"></script><style>li {list-style-type: none;}.frame {width: 200px;margin: 20px auto;
}
.frame .nav {background: black;color: white;padding: 5px;
}
.nav .label{padding: 5px 10px ;
}
.nav .arrow{display:block;width:16px;height:16px;background:no-repeat center;float:right;}.arrow.up{background-image:url(images/arrow_u.png);}.arrow.down{background-image:url(images/arrow_d.png);}.menu{background: gainsboro;display:none;}.menu li {/* border: 1px solid;*/margin-left: -20px;}.show {display: block;}</style>
</head>
<body>
<ul class="frame"><li><div class="nav"><span class="label">水果</span><span class="arrow down"></span></div><ul class="menu show"><li>葡萄</li><li>栗子</li></ul></li><li><div class="nav"><span class="label">糖果</span><span class="arrow up"></span></div><ul class="menu"><li>巧克力</li><li>太妃糖</li></ul></li>
</ul>
<script>$(".nav").click(function () {var arrow = $(this).find(".arrow");if(arrow.hasClass("up")){arrow.removeClass("up").addClass("down");}else if(arrow.hasClass("down")){arrow.removeClass("down").addClass("up");}//改变箭头的方向$(this).parent().find(".menu").slideToggle();//改变二级导航菜单的显示状态
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/iriliguo/p/6739678.html

竖直手风琴导航菜单栏相关推荐

仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: 1 <html> 2 &l ...
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果. 我 ...
php添加导航,wordpress网站导航栏如何添加导航菜单栏
一个网站,一般都会有自己的导航菜单栏,这样方便用户分类查找.那么,在使用wordpress建站时,导航菜单一般都是能直接在后台设置的,也不需要其他插件或动作.现在我就以个人经验教大家wordpress ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
R语言ggplot2可视化在特定数据点添加竖直的虚线实战：Add a dotted vertical line on certain x-axis values
R语言ggplot2可视化在特定数据点添加竖直的虚线实战:Add a dotted vertical line on certain x-axis values 目录 R语言
Python把matplotlib绘制的水平条形图（horizontal bar）转化为竖直的柱状图（vertical bar）实战
Python把matplotlib绘制的水平条形图(horizontal bar)转化为竖直的柱状图(vertical bar)实战目录
用OpenCV实现图像的水平镜像(翻转)变换和竖直镜像(翻转)变换(垂直镜像变换)的源码
图像处理开发需求.图像处理接私活挣零花钱,请加微信/QQ 2487872782 图像处理开发资料.图像处理技术交流请加QQ群,群号 271891601 直接上源码,本人是参考博文的源码OpenCV2: ...
c#竖直射线法判断点是否再多边形里面
一.开发环境: VS2017 C#winform 二.竖直射线法大致介绍通过被判断的点P(x0,y0)引出竖直的上下两条射线,如果两条射线与多变形的交点都为奇数个,那么这个点再多边形里面,反之, ...
【opencv】26.图像水平边缘和竖直边缘的算子数学分析
这里我们要细分了,虽然GxG_xGx是对x求偏导得到,但是它反映的是在x方向上的三个像素值差异很大,那么假设黑色图像中一条白色竖线(有10行1列),那么卷积后: 在白色竖线以外左边相邻的那一列,他的 ...

竖直手风琴导航菜单栏

竖直手风琴导航菜单栏相关推荐

最新文章

热门文章