javascript下拉列表菜单的实现方法


Posted in Javascript onNovember 18, 2015

之前写过这个《javascript下拉列表中显示树形菜单的实现方法》菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看。现在采用table来封装,我们知道table的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多。
1、点击之后都可以并存的情况(只需函数写法不一样就可)
dispaly也是自己设置的,通过父节点来操作子节点,显示与否;

/* function open1(node){ 
   
   //通过父节点来操作兄弟节点 
    
   当点击之后出现之后,直接就能打开但是要求在点开一个时候,其余的都关掉 
 
    var nodes = node.parentNode; 
    var nn = nodes.getElementsByTagName("ul")[0]; 
    with (nn.style) { 
     display = (display == "block") ? "none" : "block"; 
    } 
   }*/ 
   </script>

2、点击之后只允许打开一个,其余的都要关掉

<script type="text/javascript"> 
    function list1(node){ 
    //这是要对全部操作,必须要得到所有的对象 (根据table 的id 来获得) 
    //根据this判断,不是属于this,那么就关闭 
    //alert("aa"); 
    //1,获得点击对象的值 
    var nodes = node.parentNode;//传入当前的父节点 
    var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象,要是遍历所有,与这个对象一样,就设置相反的情况,其余的全部关闭 
    //2,获得全部对象 
    var mm = document.getElementById("menuid"); 
    var names = mm.getElementsByTagName("ul"); 
     
    //3,开始一一配对 
    for (var x = 0; x < names.length; x++) { 
     /*这样写,可以简化,利用下面的方法 
      if (names[x] == nn) { 
      if (nn.className == "open2") { 
       nn.className = "close2"; 
      } 
      else { 
       nn.className = "open2"; 
      } 
     }else { 
      nn.className = "close2"; 
     }*/ 
     if(names[x]==nn&&names[x].className!="open2"){ 
       nn.className="open2"; 
     }else{ 
       names[x].className="close2"; 
     } 
    } 
   } 
 </script>

 css样式的编写:

<style type="text/css"> 
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  }

效果图(只能开一个的):

javascript下拉列表菜单的实现方法

javascript下拉列表菜单的实现方法

完整代码:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>qqMenu.html</title> 
 <style type="text/css"> 
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  } 
 </style> 
 <script type="text/javascript"> 
  /* function open1(node){ 
   
   //通过父节点来操作兄弟节点 
    
   当点击之后出现之后,直接就能打开但是要求在点开一个时候,其余的都关掉 
 
    var nodes = node.parentNode; 
    var nn = nodes.getElementsByTagName("ul")[0]; 
    with (nn.style) { 
     display = (display == "block") ? "none" : "block"; 
    } 
   }*/ 
   </script> 
   <script type="text/javascript"> 
    function list1(node){ 
    //这是要对全部操作,必须要得到所有的对象 (根据table 的id 来获得) 
    //根据this判断,不是属于this,那么就关闭 
    //alert("aa"); 
    //1,获得点击对象的值 
    var nodes = node.parentNode;//传入当前的父节点 
    var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象,要是遍历所有,与这个对象一样,就设置相反的情况,其余的全部关闭 
    //2,获得全部对象 
    var mm = document.getElementById("menuid"); 
    var names = mm.getElementsByTagName("ul"); 
     
    //3,开始一一配对 
    for (var x = 0; x < names.length; x++) { 
     /*这样写,可以简化,利用下面的方法 
      if (names[x] == nn) { 
      if (nn.className == "open2") { 
       nn.className = "close2"; 
      } 
      else { 
       nn.className = "open2"; 
      } 
     }else { 
      nn.className = "close2"; 
     }*/ 
     if(names[x]==nn&&names[x].className!="open2"){ 
       nn.className="open2"; 
     }else{ 
       names[x].className="close2"; 
     } 
    } 
   } 
 </script> 
  
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
 </head> 
 
 <body > 
 <table id="menuid"> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">同事栏</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">同事栏</a> 
    <ul > 
     <li>同事1</li> 
     <li>同事2</li> 
     <li>同事3</li> 
     <li>同事4</li> 
    </ul> 
     
   </td> 
  </tr> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">同学栏</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">同学栏</a> 
    <ul> 
     <li>同学1</li> 
     <li>同学2</li> 
     <li>同学3</li> 
     <li>同学4</li> 
    </ul> 
   </td> 
  </tr> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">黑名单栏</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">黑名单栏</a> 
    <ul> 
     <li>黑名单同学1</li> 
     <li>黑名单同学2</li> 
     <li>黑名单同学3</li> 
     <li>黑名单同学4</li> 
    </ul> 
   </td> 
  </tr> 
  
 </table> 
 </body> 
</html>

相信大家通过这两篇文章的介绍应该有了大概的思路,小编的这篇文章有些制作的效果略微简陋,大家可以再进一步的完善。

Javascript 相关文章推荐
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
JavaScript严格模式详解
Nov 18 #Javascript
You might like
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python中 * 的用法详解
2019/07/10 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
幼儿园教师的考核评语
2014/04/18 职场文书
综艺节目策划方案
2014/06/13 职场文书
《落花生》教学反思
2016/02/16 职场文书