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


Posted in Javascript onMay 16, 2017

虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下:

如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单。这里有两个点,实现展现和隐藏用display="block"和display="none",另外就是要做一个判断,if   else的判断当前是block还是none。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style type="text/css"> 
  #sub_menu_1,#sub_menu_2{ 
   display: none; 
  } 
  ul li:hover{ 
   cursor: pointer; 
  } 
 </style> 
</head> 
<body> 
 <ul> 
  <li onclick = "f('sub_menu_1')">一级菜单1 
   <ul id="sub_menu_1"> 
    <li>二级餐单1</li> 
    <li>二级餐单1</li> 
    <li>二级餐单1</li> 
    <li>二级餐单1</li> 
   </ul> 
  </li> 
  <li onclick="f('sub_menu_2')">一级菜单2 
   <ul id="sub_menu_2"> 
    <li>二级菜单2</li> 
    <li>二级菜单2</li> 
    <li>二级菜单2</li> 
    <li>二级菜单2</li> 
   </ul> 
 
  </li> 
  <li>一级餐单3</li> 
 </ul> 
 <script type="text/javascript"> 
  function f(str){ 
    var sub_menu = document.getElementById(str); 
    var dis_v = sub_menu.style.display; 
     
    if(dis_v == "block") 
     sub_menu.style.display = "none"; 
    else 
     sub_menu.style.display = "block"; 
      
   } 
   
 </script> 
</body> 
</html>

有个注意事项就是一级菜单的li不能添加a标签,不然会不起作用。
如果,你的页面默认进来二级菜单是展现的,点击时才关闭。直接把style标签的样式display="none"去掉就可以。同时需要修改一下js。

<script type="text/javascript"> 
  function f(str){ 
    var sub_menu = document.getElementById(str); 
    var dis_v = sub_menu.style.display; 
     
    if(dis_v == "none") 
     sub_menu.style.display = "block"; 
    else 
     sub_menu.style.display = "none"; 
      
   } 
   
 </script>

仔细看,不然你就会发现你需要点击两次才会出现想要的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
详解Vue的sync修饰符
May 15 Vue.js
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
VUE多层路由嵌套实现代码
May 15 #Javascript
JavaScript制作简单的框选图表
May 15 #Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
vscode 远程调试python的方法
2017/12/01 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
教师暑期培训感言
2014/08/15 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers