JavaScript实现点击出现子菜单效果的方法

　　介绍

小编给大家分享一下JavaScript实现点击出现子菜单效果的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

JavaScript实现点击出现子菜单的具体代码,如下

首先让我们看一下点击出现子菜单的效果如下图:

JavaScript实现点击出现子菜单效果的方法

点击黄色的按钮,出现子菜单如下图:

JavaScript实现点击出现子菜单效果的方法

让我们先看一下布局:

& lt; div 类=癿enu"比; 　　,& lt; div 类=皊ign", id=皊ign"祝辞& lt;/div> 　　,& lt; div 类=發is", id=發is"比; 　　,& lt; ul> 　　,& lt; li> & lt; a  https://www.yisu.com/zixun/href=" "> 　　<李> 两个 　　<李> 3 　　<李> 四 　　<李> 5 　　 　　
　　

CSS样式如下:

ul { 　　,padding-inline-start: 0 px; 　　,} 　　,.menu { 　　,保证金:0,汽车; 　　,背景:# 0 da795; 　　40岁,身高:px; 　　,宽度:600 px; 　　,} 　　,.sign { 　　,宽度:30 px; 　　浮:大敌;; 　　,margin-right: 20 px; 　　,margin-top: 8 px; 　　25,身高:px; 　　背景:大敌;rgba (243193、63、1.00); 　　,这个特性:5 px; 　　,位置:相对; 　　,光标:指针;//把光标设置成手的形状 　　,} 　　,.lis { 　　,位置:绝对; 　　,上图:30 px; 　　,显示:没有; 　　,} 　　李,.lis  ul  { 　　,list-style:没有; 　　,宽度:600 px; 　　,行高:40像素; 　　,字体大小:14 px; 　　,text-align:中心; 　　,边界底部:1 px  solid  # 565656; 　　,背景:# EAEDD5; 　　,}.lis  { 　　,文字修饰:没有; 　　,颜色:黑色; 　　,} 　　答:{徘徊,.lis  　　,颜色:# 0 da759; 　　}

CSS样式里面特别注意一下位置(定位)。
Lis这个类里面的显示:没有一个,因为一开始子菜单是隐藏起来的。

JavaScript部分如下:

1,先获取它们的ID,获取它们的ID之后,给第一个ID (sigin)通过OnClick添加一个点击事件;
2,在声明一个变量我第二个ID赋值于我,在用一个分支语句如果……,如果我等于没有,那么就执行第一条语句,如果不等于,就执行第二条语句。

这样就达到了我们想要的效果,见实现代码:

& lt; script> 　　,var  biaozhi=. getelementbyid (“sign"); 　　,var 李=. getelementbyid (“lis"); 　　,biaozhi.onclick=function () { 　　,var 我=li.style.display; 　　,if (我==皀one") { 　　,li.style.display=癰lock"//第一条语句 　　,其他}{ 　　,li.style.display=皀one"//第二条语句 　　,} 　　,} 　　& lt;/script>

以上是“JavaScript实现点击出现子菜单效果的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

JavaScript实现点击出现子菜单效果的方法