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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
杏林同学录(四)
2006/10/09 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
python从入门到精通(DAY 2)
2015/12/20 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
pytorch forward两个参数实例
2020/01/17 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
中学生国旗下讲话稿
2014/04/26 职场文书
推荐信怎么写
2014/05/09 职场文书
我爱我校演讲稿
2014/05/21 职场文书
社区志愿者活动总结
2014/06/26 职场文书
十佳青年事迹材料
2014/08/21 职场文书
户籍证明书标准模板
2014/09/10 职场文书
美术教师个人工作总结
2015/02/06 职场文书
婚宴主持词
2015/06/30 职场文书
消费者理赔投诉书
2015/07/02 职场文书
新教师教学工作总结
2015/08/12 职场文书