简单实现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 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
angular4实现带搜索的下拉框
Mar 25 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多种序列化与反序列化的方法
2013/06/06 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php实现微信支付之现金红包
2018/05/30 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
详解python分布式进程
2018/10/08 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python 模块导入问题汇总
2021/02/01 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
前台文员岗位职责
2013/12/28 职场文书
建材投资建议书
2014/05/16 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
德能勤绩工作总结
2015/08/11 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python