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>

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

赞 (0)

相关推荐

  • js菜单点击显示或隐藏效果的简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js实现点击向下展开的下拉菜单效果代码

    js实现点击向下展开的下拉菜单效果代码

    本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • js 下拉菜单点击旁边收起实现(踩坑记)

    js 下拉菜单点击旁边收起实现(踩坑记)

    背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h

  • JavaScript实现点击自制菜单效果

    JavaScript实现点击自制菜单效果

    本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码,供大家参考,具体内容如下 应用场景:当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时,需要阻止浏览器默认行为,并执行我们想要的效果 第一种方式,通过创建元素的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp

  • 下拉菜单点击实现连接跳转功能的js代码

    1.js代码 复制代码 代码如下: <!-- function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } --> 2.使用 复制代码 代码如下: <p class="yq">校

  • JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • js点击时关闭该范围下拉菜单之外的菜单方法

    实例如下: $(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest("#menu").length == 0 && $(e.target).closest("input").length == 0){ //点击id为menu之外且id,则触发 hideMenu(); } }) }) 以上这篇js点击时关闭该范围

  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • js实现二级菜单点击显示当前内容效果

    js实现二级菜单点击显示当前内容效果

    最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q

  • 简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

随机推荐