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 动态设置已知select的option的value值的代码
Dec 16 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
JavaScript实现下拉列表
Jan 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
php小偷相关截取函数备忘
2010/11/28 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
JavaScript中的eval()函数详解
2013/08/22 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
自我推荐信范文
2014/05/09 职场文书
廉政教育的心得体会
2014/09/01 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
政工师工作总结2015
2015/05/26 职场文书
电影复兴之路观后感
2015/06/02 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
Python中的 enumerate和zip详情
2022/05/30 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技