php简单实现无限分类树形列表的方法龙8游戏,javascript下拉列表中显示树形菜单的实现方法

hidden    和  overflow=”visible”这两个属性,然后点击一下,希望本文所述对大家的php程序设计有所帮助

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

本文实例讲述了php简单实现无限分类树形列表的方法。分享给大家供大家参考。具体如下:

用到的是 overflow:hidden    和  overflow=”visible”这两个属性
在点击的function中,设置属性应该

$items = array( 
  1 => array('id' => 1, 'pid' => 0, 'name' => '江西省'), 
  2 => array('id' => 2, 'pid' => 0, 'name' => '黑龙江省'),
  3 => array('id' => 3, 'pid' => 1, 'name' => '南昌市'), 
  4 => array('id' => 4, 'pid' => 2, 'name' => '哈尔滨市'),
  5 => array('id' => 5, 'pid' => 2, 'name' => '鸡西市'), 
  6 => array('id' => 6, 'pid' => 4, 'name' => '香坊区'), 
  7 => array('id' => 7, 'pid' => 4, 'name' => '南岗区'), 
  8 => array('id' => 8, 'pid' => 6, 'name' => '和兴路'), 
  9 => array('id' => 9, 'pid' => 7, 'name' => '西大直街'), 
  10 => array('id' => 10, 'pid' => 8, 'name' => '东北林业大学'),
  11 => array('id' => 11, 'pid' => 9, 'name' => '哈尔滨工业大学'),
  12 => array('id' => 12, 'pid' => 8, 'name' => '哈尔滨师范大学'),
  13 => array('id' => 13, 'pid' => 1, 'name' => '赣州市'), 
  14 => array('id' => 14, 'pid' => 13, 'name' => '赣县'), 
  15 => array('id' => 15, 'pid' => 13, 'name' => '于都县'), 
  16 => array('id' => 16, 'pid' => 14, 'name' => '茅店镇'), 
  17 => array('id' => 17, 'pid' => 14, 'name' => '大田乡'), 
  18 => array('id' => 18, 'pid' => 16, 'name' => '义源村'), 
  19 => array('id' => 19, 'pid' => 16, 'name' => '上坝村'), 
  20 => array('id' => 20, 'pid' => 0, 'name' => '广东省'), 
  21 => array('id' => 21, 'pid' => 20, 'name' => '广州市'),
); 
$t = array(); 
foreach ($items as $id => $item) { 
  if ($item['pid']) { 
    $items[$item['pid']][$item['id']] = &$items[$item['id']];
    $t[] = $id; 
  } 
} 
foreach($t as $u) { 
  unset($items[$u]); 
} 
echo "<pre>"; 
print_r($items);

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

希望本文所述对大家的php程序设计有所帮助。

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

您可能感兴趣的文章:

  • QQ好友列表树形列表java代码实现代码
  • javascript下拉列表中显示树形菜单的实现方法
  • js实现无限级树形导航列表效果代码
  • javascript实现在下拉列表中显示多级树形菜单的方法
  • php从数据库查询结果生成树形列表的方法
  • cmd tree命令
    以树形格式罗列文件
  • tree 以树形格式罗列文件
  • 一个简单的js树形菜单
  • Bootstrap树形控件使用方法详解
  • Android多级树形列表控件

实现效果:

龙8游戏 1

<!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设置)

龙8游戏 2

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

您可能感兴趣的文章:

  • QQ好友列表树形列表java代码实现代码
  • js实现无限级树形导航列表效果代码
  • javascript实现在下拉列表中显示多级树形菜单的方法
  • php从数据库查询结果生成树形列表的方法
  • php简单实现无限分类树形列表的方法
  • cmd tree命令
    以树形格式罗列文件
  • tree 以树形格式罗列文件
  • 一个简单的js树形菜单
  • Bootstrap树形控件使用方法详解
  • Android多级树形列表控件