js树形菜单

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js树形菜单</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<link href="css教程/163css.css" type=text/css rel=stylesheet>
</head>
<body>
<div class=pnav-cnt>
 <div class=pnav-box id=letter-a>
 <div class=box-title><a class="btn-fold " href="http://www.111cn.net"></a><a class="btn-unfold hidden"
 href="http://www.111cn.net"></a><span class=pnav-letter>a</span><span class=cdgray>(共32张)</span></div>
 <ul class="box-list hidden">
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>阿斯顿·马丁</a> </b><span class=cdgray>(414)</span>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>阿斯顿马丁db9</a></h2>
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>奥迪</a> </b><span class=cdgray>(3986)</span>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>奥迪a6</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>奥迪a6l</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>奥迪q5</a></h2>
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>阿尔法·罗米欧</a> </b><span class=cdgray>(332)</span>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>alfa 147</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>阿尔法·罗米欧pandion</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>2uettottanta</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>tz3 corsa</a></h2></li></ul></div>
 <div class=pnav-box id=letter-b>
 <div class=box-title><a class="btn-fold "
 href="http://www.111cn.net"></a><a class="btn-unfold hidden"
 href="http://www.111cn.net"></a><span
 class=pnav-letter>b</span><span class=cdgray>(共22819张)</span></div>
 <ul class="box-list hidden">
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>奔腾</a> </b><span class=cdgray>(764)</span>
   <h2 class=hidden><a
   href="http://www.111cn.netckindex/topicid=294g0008,setid=0.html"
   target=nt_phview>奔腾b50</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>奔腾b70</a></h2>
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>宝马</a> </b><span class=cdgray>(35)</span>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>宝马3系</a></h2>
 
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>进口宝马5系</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>宝马x1</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>宝马gran coupe</a></h2>
   <h2 class=hidden><a
   href="http://www.111cn.net"
   target=nt_phview>acs5</a></h2>
  
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>宝骏</a> </b><span class=cdgray>(0)</span>
   <li><a class=btn-fold href="http://www.111cn.net"></a><a
   class="btn-unfold hidden" href="http://www.111cn.net"></a><b><a
   href="http://www.111cn.net"
   target=nt_phview>北京</a> </b><span class=cdgray>(19)</span> </li></ul></div>

<script src="js/163css.js" type=text/网页特效></script>

<script type=text/javascript>
//<![cdata[
(function(){
ntes("span.photo-search input[type=text]").addevent("focus", function(){ this.value == this.defaultvalue && (this.value = ""); }).addevent("blur", function(){ this.value == "" && (this.value = this.defaultvalue); });
 ntes("div.pnav-box div.box-title a.btn-fold").addevent("click", function(e){
  e.preventdefault();
  var eletitle = ntes(this.parentnode);
  ntes(this).addcss("hidden");
  eletitle.$("a.btn-unfold").removecss("hidden");
  ntes(eletitle.parentnode).$("ul.box-list").removecss("hidden");
 });
 ntes("div.pnav-box div.box-title a.btn-unfold").addevent("click", function(e){
  e.preventdefault();
  var eletitle = ntes(this.parentnode);
  ntes(this).addcss("hidden");
  eletitle.$("a.btn-fold").removecss("hidden");
  ntes(eletitle.parentnode).$("ul.box-list").addcss("hidden");
 });
 ntes("div.pnav-box ul.box-list a.btn-fold").addevent("click", function(e){
  e.preventdefault();
  var eletitle = ntes(this.parentnode);
  ntes(this).addcss("hidden");
  eletitle.$("a.btn-unfold").removecss("hidden");
  eletitle.$("h2").removecss("hidden");
 });
 ntes("div.pnav-box ul.box-list a.btn-unfold").addevent("click", function(e){
  e.preventdefault();
  var eletitle = ntes(this.parentnode);
  ntes(this).addcss("hidden");
  eletitle.$("a.btn-fold").removecss("hidden");
  eletitle.$("h2").addcss("hidden");
 });
 new ntes.ui.slide(ntes("ul.photo-snav li"), ntes("div.photo-scnt"), "active", "mouseo教程ver", 6000);
})();
//]]>
</script>

</div>
</body>

</html>

源码下载地址
http://down.111cn.net/down/code/js/2010/1009/21117.html

时间: 2024-10-23 20:53:54

js树形菜单的相关文章

JS树形菜单组件Bootstrap TreeView使用方法详解_javascript技巧

简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

一个简单的js树形菜单_javascript技巧

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

js树形菜单_树形菜单代码

个人资料 基本信息 修改密码 我的简历 求职简历 求职意向 上传照片 简历预览 职位搜索 快速搜索 应聘管理 应聘记录 企业邀请 收藏职位 我的知识 我要提问 我要回答 发问记录 回答记录 分数记录

js 树形菜单(php ajax可刷新)

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=g

js树形菜单_js网页特效

设计类 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 Adobe photoshop CS3 设计类 Ad

css js树形菜单效果

CSS TreeMenu By 枫岩@IECN.Net 同事 Dodo 小春 小林 小龙 枫岩 客户 Dodo 小春 小林 小龙 枫岩 朋友 Dodo 小春 小林 小龙 枫岩 家人 Dodo 小春 小林 小龙 枫岩 退出系统

Vue.js组件tree实现无限级树形菜单_javascript技巧

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

jquery树形菜单效果的简单实例_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery实现树形菜单完整代码_jquery

本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199