javascript下拉列表中显示树形菜单的实现方法

很简单的一个使用：点击菜单，能够显示下面的或者不显示。
1、主要目的：展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该

node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽

2、采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

实现效果：

<!DOCTYPE html>
<html>
 <head>
 <title>list.html</title> 

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <style type="text/css">
  dl{
  height:18px;/*优先级问题，必须要写*/
  overflow:hidden;
  }
  dd{
  margin:0px;
  padding:0px;
  }
  .close{
  height:18px;/*优先级问题，必须要写*/
  overflow:hidden;
  }
  .open{
  height:80px;
  overflow:visible;
  background-color:#ff8000;
  } 

 </style>
 <script type="text/javascript"> 

   function click2(node1){
//   alert("aa"+node.nodeName);// td
   var nodes=node1.parentNode;
//   alert(nodes.nodeName);
   // alert("aa"+nodes.className);
   //※※通过传进的对象 判断采用哪种css模式
   if(nodes.className=="open"){
    nodes.className="close";
   }else{
    nodes.className="open";
   }
   }
 </script> 

 </head>
 <body>
 <!--层次列表-->
 <!--当很多时候采用传参就很麻烦,每个都需要去传参
 <dl>
 <dt onclick="click1(0)">菜单条1</dt>
 <dd>菜单1</dd>
 <dd>菜单2</dd>
 <dd>菜单3</dd>
 <dd>菜单4</dd>
 </dl>
 <dl>
 <dt onclick="click1(1)">菜单条2</dt>
 <dd>菜单11</dd>
 <dd>菜单22</dd>
 <dd>菜单33</dd>
 <dd>菜单44</dd>
 </dl>
 <dl>
 <dt onclick="click1(2)">菜单条3</dt>
 <dd>菜单12</dd>
 <dd>菜单23</dd>
 <dd>菜单34</dd>
 <dd>菜单45</dd>
 </dl>
 --> 

 <br/>
 <br/>
 <hr/> 

 <!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->
 <dl>
 <dt onclick="click2(this)">1菜单条1</dt>
 <dd>菜单1</dd>
 <dd>菜单2</dd>
 <dd>菜单3</dd>
 <dd>菜单4</dd>
 </dl>
 <dl>
 <dt onclick="click2(this)">2菜单条2</dt>
 <dd>菜单11</dd>
 <dd>菜单22</dd>
 <dd>菜单33</dd>
 <dd>菜单44</dd>
 </dl>
 <dl>
 <dt onclick="click2(this)">3菜单条3</dt>
 <dd>菜单12</dd>
 <dd>菜单23</dd>
 <dd>菜单34</dd>
 <dd>菜单45</dd>
 </dl>
 </body>
</html>

点击后：设置背景颜色（css设置）

如何利用javascript制作下拉列表中显示树形菜单，相信大家通过这篇文章应该有了大概的思路，也相信大家制作的下拉列表中显示树形菜单效果比小编做的还精致。

赞 (0)

相关推荐

  • Android多级树形列表控件

    Android多级树形列表控件

    我们开发app过程中,经常会碰到需要 多级列表展示的效果.而Android原生sdk中根本没有3级 4级甚至更多级别的列表控件. 所以我们就要自己去实现一个类似treeListView 的控件,下面这个是我项目中的一个效果图,可支持多级列表扩展. android中有ExpandListView控件,但是这个控件只支持两级列表.对于多级列表如果重写这个不是很好用. 实现这种列表 思想就是递归,构造一个子父级的关系. 话不多说 代码中体会 Activity package com.example.c

  • javascript实现在下拉列表中显示多级树形菜单的方法

    javascript实现在下拉列表中显示多级树形菜单的方法

    本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • js实现无限级树形导航列表效果代码

    js实现无限级树形导航列表效果代码

    本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;

  • php简单实现无限分类树形列表的方法

    本文实例讲述了php简单实现无限分类树形列表的方法.分享给大家供大家参考.具体如下: $items = array( 1 => array('id' => 1, 'pid' => 0, 'name' => '江西省'), 2 => array('id' => 2, 'pid' => 0, 'name' => '黑龙江省'), 3 => array('id' => 3, 'pid' => 1, 'name' => '南昌市'), 4 =

  • cmd tree命令 以树形格式罗列文件

    当你向别人展示你自己所做光盘的内容的时候,或者是罗列你硬盘上某个目录下的资料的时候,tree命令显得相当方便,并且能让你展示的内容层次分明,井井有条.啥也不说了,上图,顺便温习一下cd命令. 当然,你可能并不满足于只给别人抓张图,你可能还想把这些信息导入到文件中去,加工一番再发出去,那么,请使用这条命令:tree>list.txt,这样,所有的信息都保存到list.txt文件中去了. 更多的命令,请在cmd窗口中用 tree /? 查询(其实就两个参数). 很可能只是一条简单的命令,只是一眨眼的

  • 一个简单的js树形菜单

    一个简单的js树形菜单

    我练习一下,以免不时之需. 树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已. 上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了. 给个例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

  • php从数据库查询结果生成树形列表的方法

    本文实例讲述了php从数据库查询结果生成树形列表的方法.分享给大家供大家参考.具体分析如下: 本代码可以从数据库读取数据生成一个类似于windows的资源管理器的树形列表 <?php /* Here are the database definitions (for Solid) that i use in this code. * It should not be hard to adapt it to another database. */ /* CREATE TABLE dirent_t

  • QQ好友列表树形列表java代码实现代码

    QQ好友列表树形列表java代码实现代码

    以前在网上瞎转悠的时候就发现很多人为用Java实现QQ登陆后的面板的问题感到十分头疼,最近我因在写模拟QQ的项目,故不可或缺的遇到了这一个问题,在网上我google了,百度了,最终发现的是有很多人被这一问题困扰,却没有解决的方案,估计是那些写出来了的人,没有发布到网上来,如今,经过自己的多方面查找资料,终于把他写出来了,也不枉昨晚熬夜了,呵呵,好了先让我们来看看实现的效果截图: 好了,效果就是这样了,虽然实现了基本功能,但是还是不完美,比如说好友面板不能随着窗口改变大小而改变,不过应该已经可以解

  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    一.JQuery树形控件 Jquery树形控件是一款基于JQuery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子.它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装. 1.一睹初容 全部收起 展开一级 全部展开 2.代码示例 此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可. <link href="~/Content/Tree1/

  • tree 以树形格式罗列文件

    当你向别人展示你自己所做光盘的内容的时候,或者是罗列你硬盘上某个目录下的资料的时候,tree命令显得相当方便,并且能让你展示的内容层次分明,井井有条.啥也不说了,上图,顺便温习一下cd命令. 当然,你可能并不满足于只给别人抓张图,你可能还想把这些信息导入到文件中去,加工一番再发出去,那么,请使用这条命令:tree>list.txt,这样,所有的信息都保存到list.txt文件中去了. 更多的命令,请在cmd窗口中用 tree /? 查询(其实就两个参数). 很可能只是一条简单的命令,只是一眨眼的

随机推荐