简单实现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数组的基本操作(很全自己整理的)
Oct 16 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
js实现随机抽奖
Mar 19 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php5与php7的区别点总结
2019/10/11 PHP
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python实现整数的二进制循环移位
2019/03/08 Python
信号生成及DFT的python实现方式
2020/02/25 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
国窖1573广告词
2014/03/21 职场文书
应届生自荐书
2014/06/23 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
《月光曲》教学反思
2016/02/16 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
Python内置数据类型中的集合详解
2022/03/18 Python