看到别人通过id和增加的属性来对应父子关系,觉得麻烦,想着能不能定义一个类来实现。最终的代码类似这样
<ul>
<li>一级菜单</li>
<li>一级菜单存在子菜单<li>
<li class="hasSon">
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
实现的功能是点击存在子菜单的一级菜单,能够打开或关闭该子菜单下的二级菜单。
之前想通过纯CSS来实现,找了很久发现CSS无法监听onclick动作,最终放弃,结合js来做。其实用JQuery来实现更简单,不过为了更加通用,还是决定用原生js来实现。
这里定义了一对样式,分别是in和out,表示关闭和打开折叠菜单。利用css选择器,选择紧连着li的ul标签,设置display属性。这样js部分,只需要替换class的样式就可以了。
.out {
}
.out + ul {
display: block;
}
.in {
}
.in + ul {
display: none;
}
js代码如下,用到的知识点比较多,获取对象的方法,替换字符串的方法,遍历对象组的方法等。
//获取所有拥有子菜单的对象
var objects = document.getElementsByClassName("hasSon");
for (var i = 0; i < objects.length; i++) {
var element = objects[i];
//遍历对象,绑定点击事件方法
element.onclick = function () {
var temp = this.className;
//替换out、in对象
if (temp.indexOf("out") != -1) {
this.className = temp.replace(/out/, "in");
} else if (temp.indexOf("in") != -1) {
this.className = temp.replace(/in/, "out");
} else {
this.className = "out";
}
}
}
分享到:
相关推荐
一款基于jQuery+CSS3+HTML5实现的折叠卡片式下拉菜单特效代码,有一种3D立体效果的下拉菜单代码。
css3折叠下拉菜单是一款纯css3实现的动画下拉菜单效果。 css3折叠下拉菜单特效图:
采用Javascript 、Css、Html脚本经典的折叠下拉式菜单。在此供大家参考,若有不足之处希望高手指点!
纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果。
js css折叠展开菜单简洁版,鼠标单击主菜单,子菜单就展开了,从形式上来说,也可以叫做下拉菜单吧,基本没有过多美化,十分简洁,用的朋友,自己修改css文件美化一下,或增加背景颜色或用图片来修饰一下。
近50种伸缩滑动折叠菜单(js、css、div实现),有滑动导航、工具条,下拉菜单等,是目前web设计中导航效果最全面的打包文件
使用前端三大件HTML+CSS+JS做一个炫酷的下拉菜单栏适合web前端的在校生或者自学前端的人群
多级CSS3下拉菜单导航是一款基于CSS3和Javascript代码实现的清新响应式多级折叠下拉导航菜单。
记得之前我们给大家分享过一些飘带式的菜单,比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单;也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
DWCS3折叠菜单和下拉菜单的做法 比起那些用JS来说这个做法就优秀的多了。而且完美的CSS看起来是非常酷的!
1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...
CSS3菜单实例,运用纯CSS3技术实现一款下拉手风琴菜单功能,其实不能说是关闭,应该来说是折叠或收缩了,点击菜单面板右上角的小三角,本级菜单的子菜单项就会折叠收起来,貌似关闭了一样,这种菜单也叫手风琴菜单,...
HTML5折叠卡片式下拉菜单代码.zip
超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,下拉菜单,自由拖动的面板.
多级CSS3下拉菜单导航是一款基于CSS3和Javascript代码实现的清新响应式多级折叠下拉导航菜单。
纯CSS实现的二级纵向下拉菜单,可以滑动折叠,无需JavaScript代码,兼容性好
jQuery鼠标经过二级菜单下拉代码是一款基于jQuery CSS3实现的鼠标悬浮滑动下拉二级菜单特效
JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...
响应式下拉导航菜单响应式、可访问、多级下拉菜单、可换肤且随时可用。 ##特征: 多达 3 级导航在断点处折叠成垂直菜单(默认为 768px) 触摸/点击时激活垂直菜单,悬停时激活水平菜单(我想添加对触摸事件的检测...