JavaScript实现点击出现子菜单效果的方法-创新互联

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

创新互联-专业网站定制、快速模板网站建设、高性价比临潼网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式临潼网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖临潼地区。费用合理售后完善,十多年实体公司更值得信赖。

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

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

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

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

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

让我们先看一下布局:


 
   
     
  • one
  •  
  • two
  •  
  • three
  •  
  • four
  •  
  • five
  •  
 

CSS样式如下:

ul{
 padding-inline-start: 0px;
 }
 .menu{
 margin: 0 auto;
 background:#0DA795;
 height: 40px;
 width: 600px;
 }
 .sign{
 width: 30px;
 float: right;
 margin-right: 20px;
 margin-top: 8px;
 height: 25px;
 background: rgba(243,193,63,1.00);
 border-radius: 5px;
 position: relative;
 cursor: pointer;//把光标设置成手的形状
 }
 .lis{
 position: absolute;
 top:30px;
 display: none;
 }
 .lis ul li{
 list-style: none;
 width: 600px;
 line-height: 40px;
 font-size: 14px;
 text-align: center;
 border-bottom: 1px solid #565656;
 background:#EAEDD5;
 }.lis a{
 text-decoration: none;
 color: black;
 }
 .lis a:hover{
 color: #0da759;
}

CSS样式里面特别注意一下position(定位)。
Lis这个类里面的display:none;因为一开始子菜单是隐藏起来的。


JavaScript部分如下:

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


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

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


网站名称:JavaScript实现点击出现子菜单效果的方法-创新互联
文章出自:http://scyanting.com/article/cocghg.html

其他资讯