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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
HTML中事件触发列表与解说
Jul 09 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
AJAX实现省市县三级联动效果
Oct 16 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生成扇形比例图实例
2013/11/06 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Javascript的this用法
2017/01/16 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python中join函数简单代码示例
2018/01/09 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
利用python修改json文件的value方法
2018/12/31 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
.net C#面试题
2012/08/28 面试题
园林资料员岗位职责
2013/12/30 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android