简单实现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 相关文章推荐
script标签属性用type还是language
Jan 21 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
Javascript之Math对象详解
Jun 07 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
下载官网python并安装的步骤详解
2019/10/12 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
政治学求职信
2014/06/03 职场文书
珍惜资源的建议书
2014/08/26 职场文书
优秀团员事迹材料
2014/12/25 职场文书
会议开幕词
2015/01/28 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
焦裕禄观后感
2015/06/03 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
汶川大地震感悟
2015/08/10 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Python中的变量与常量
2021/11/11 Python