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图片预加载技术(详细演示)
Mar 12 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
详解JS函数防抖
Jun 05 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
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批量生成缩略图的代码
2008/07/19 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
拖动一个HTML元素
2006/12/22 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
python数据抓取3种方法总结
2021/02/07 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
机电一体化求职信
2014/03/10 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
留学推荐信怎么写
2015/03/26 职场文书
Python中for后接else的语法使用
2021/05/18 Python