JavaScript实现点击出现子菜单效果

本文实例为大家分享了JavaScript实现点击出现子菜单的具体代码，供大家参考，具体内容如下

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

点击黄色的按钮，出现子菜单如下图：

让我们先看一下布局：

div class="menu">
     div class="sign" id="sign">
    /div>
     div class="lis" id="lis">
     ul>
     li>
    a href="">
    one/a>
    /li>
     li>
    a href="">
    two/a>
    /li>
     li>
    a href="">
    three/a>
    /li>
     li>
    a href="">
    four/a>
    /li>
     li>
    a href="">
    five/a>
    /li>
     /ul>
     /div>
    /div>
    

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；那么就执行第一条语句，如果不等于，就执行第二条语句。

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

script>
     VAR biaozhi=document.getElementById("sign");
     var li=document.getElementById("lis");
 biaozhi.onclick=function(){
     var i=li.style.display;
 if (i=="none"){
     li.style.display="block";
//第一条语句 }
else{
     li.style.display="none";
//第二条语句 }
 }
    /script>
    

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

• JavaScript实现点击自制菜单效果
• js 下拉菜单点击旁边收起实现(踩坑记)
• js实现二级菜单点击显示当前内容效果
• JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
• js点击时关闭该范围下拉菜单之外的菜单方法
• 简单实现js点击展开二级菜单功能
• js实现鼠标点击左上角滑动菜单效果代码
• js实现点击向下展开的下拉菜单效果代码
• CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
• js菜单点击显示或隐藏效果的简单实例
• Js点击弹出下拉菜单效果实例
• 下拉菜单点击实现连接跳转功能的js代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！