<!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>
<title>JS实现淘宝式多级选择菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
body *{
font-size:14px;
margin:0;
padding:0;
}
#wrapper{
clear:both;
width:778px;
height:220px;
background-color:#FFF;
margin-bottom:8px;
}
#wrapper ul{
margin:0 3px 0 0;
padding:0;
border:1px solid #CCC;
float:left;
width:189px;
height:218px;
overflow:auto;
}
#wrapper ul.Blank{
background-color:#F6F6F6;
}
#wrapper li{
list-style-type:none;
width:auto;
height:20px;
margin:0 1px !important;
margin /**/:0 1px 0 -15px;
padding:0;
border:1px solid #FFF;
line-height:20px;
color:#444;
text-indent:3px;
cursor:default;
}
#wrapper li.Selected{
background-color:#CAFFC0;
border:1px solid #0A9800;
color:#006623;
}
#wrapper li.IsParent{
background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);
background-position:99% 50%;
background-repeat:no-repeat;
}
#wrapper li.RecentUsed{
color:#170;
}
#titleType{
clear:both;
width:778px;
background-color:#FFF;
}
#titleType ul{
float:left;
}
#titleType li{
margin:0 3px 0 0;
float:left;
border:1px solid #CCC;
width:189px;
color:#0063C8;
font-weight:bold;
border-bottom:0px;
height:23px;
line-height:23px;
}
</style>
</head>
<body>
<div id="titleType">
<ul id="title">
<li>请选择品牌</li>
<li>请选择折扣和服务</li>
<li>请选择价格区间</li>
<li>请选择材质</li>
</ul>
</div>
<div id="wrapper">
<ul id="brandType" class="Blank">
</ul>
<ul id="serviceType" class="Blank">
</ul>
<ul id="rangeType" class="Blank">
</ul>
<ul id="quanlityType" class="Blank">
</ul>
</div>
</body>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e){
var re = new RegExp(this.S+e+this.S);
return re.test(this.S+this.join(this.S)+this.S);
}
function getTriggerNode(e) {
return (document.all)?event.srcElement:e.target;
}
function getObj(id){
return document.getElementById(id);
}
//初始化数据
var brandTypeData = new DataInfo();//品牌数据
brandTypeData.addData("与狼共舞",1,'','');
brandTypeData.addData("花花公子",2,'','');
var serviceTypeData = new DataInfo();//折扣和服务数据
serviceTypeData.addData("全球购",1,'','');
serviceTypeData.addData("天猫",2,'','');
var rangeTypeData = new DataInfo();//价格区间数据
rangeTypeData.addData("全球购",1,["0-50","50-120"],[1,2]);
rangeTypeData.addData("天猫",2,["0-100","100-200"],[3,4]);
var quanlityTypeData = new DataInfo();//材质数据
quanlityTypeData.addData("0-50",1,["棉","麻","蚕丝"],[1,2,3]);
quanlityTypeData.addData("50-120",2,["薄纱","棉布"],[4,5]);
quanlityTypeData.addData("0-100",3,["棉","麻","蚕丝"],[6,7]);
quanlityTypeData.addData("100-200",4,["薄纱","棉布"],[8,9]);
function DataNode(){
this.parent;
this.parentId;
this.Children;
this.childrenId;
}
function DataInfo(){
this.mList = new Array();
this.ListCount = function(){return this.mList.length;}
this.GetListObj = function(n){
if (n<this.ListCount()) return this.mList[n];
return null;
}
this.addData = function(sParent,sParentId,sChildren,sChildrenID){
obj = new DataNode();
obj.parent = sParent;
obj.parentId = sParentId;
obj.children = sChildren;
obj.childrenId = sChildrenID;
this.mList[this.ListCount()] = obj;
}
}
//构建菜单列表
function buildMenuList(objName,objData,objSelected){
console.log(objName);
console.log(objData);
console.log(objSelected);
//buildMenuList(["rangeType",quanlityTypeData],rangeTypeData,[parentId,0]);
var menuType = getObj(objName[0]);//单击的当前菜单
if(!menuType) return;
var strOutput = "";
var liClass = "";
var id = 0;
var op_txt = new Array();
var op_val = new Array();
var sub_val = new Array();//子节点数组
if (objSelected[0]){//父节点
for(i=0;i<objData.ListCount();i++){
if(objData.GetListObj(i).parentId==objSelected[0]){//判断子节点的父亲
console.log('objSelected[0]='+objSelected[0]);
id = i;
break;
}
if(i==objData.ListCount()){
menuType.innerHTML="";
menuType.className="Blank";
return false;
}
}
}
if(objName[1]){//说明有子节点,存放子节点的父亲id
for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).parentId));
}
console.log(id);
tmpobj = objData.GetListObj(id);//取出当前节点
console.log(tmpobj);
if (tmpobj.children.length==0){//孩子节点长度为0
for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).parent),op_val.push(objData.GetListObj(i++).parentId));
}else{
op_txt = tmpobj.children;//孩子对象
op_val = tmpobj.childrenId;//孩子id
}
for(i=0;i<op_txt.length;i++){
if(sub_val.in_array(op_val[i])){
liClass = "IsParent";//是父节点
}
if(op_val[i] == objSelected[1]){
liClass += " Selected";//选中
}
strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
liClass = '';
}
menuType.innerHTML = strOutput;
strOutput = "";
menuType.className="";
}
//菜单切换联动效果
var menuSelect = [];
function changeMenu(evnt){
var obj = getTriggerNode(evnt);
var objSource = obj;
//获取父节点
while(objSource.nodeName != "UL"){
objSource = objSource.parentNode;
}
//切换菜单选中样式
var ulId = objSource.id;
if(menuSelect[ulId]){
menuSelect[ulId].className=menuSelect[ulId].className.replace("Selected","");
}
obj.className += " Selected";
menuSelect[ulId] = obj;
//创建子节点
console.log(obj.id);
var parentId = (obj.id).split("__")[1];
if(objSource.id=="serviceType"){
buildMenuList(["rangeType",quanlityTypeData],rangeTypeData,[parentId,0]);
}else if(objSource.id=="rangeType"){
buildMenuList(["quanlityType",],quanlityTypeData,[parentId,0]);
}
}
buildMenuList(["brandType",],brandTypeData,[0,0]);
buildMenuList(["serviceType",rangeTypeData],serviceTypeData,[0,0]);
getObj("wrapper").onclick = changeMenu;
</script>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript程序设计基础教程(慕课版)-源代码.rar
共160个文件
html:137个
jpg:10个
js:5个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 119 浏览量
2022-07-12
07:03:21
上传
评论
收藏 614KB RAR 举报
温馨提示
JavaScript程序设计基础教程(慕课版)-源代码.rar
资源推荐
资源详情
资源评论
收起资源包目录
JavaScript程序设计基础教程(慕课版)-源代码.rar (160个子文件)
style.css 4KB
css01.css 374B
script.css 146B
file1.htm 302B
file3.htm 170B
file2.htm 168B
脚本10-5.html 6KB
脚本8-6.html 6KB
脚本10-4.html 5KB
脚本10-7.html 4KB
脚本10-3.html 4KB
脚本11-1.html 3KB
脚本10-8.html 3KB
脚本10-2.html 3KB
脚本10-9.html 2KB
脚本6-9.html 2KB
脚本9-5.html 2KB
脚本10-6.html 2KB
form.html 2KB
index.html 2KB
脚本10-1.html 2KB
脚本5-3.html 1KB
脚本7-9.html 1KB
脚本3-29.html 1KB
脚本10-11.html 1KB
脚本7-1.html 1KB
脚本5-1.html 1KB
脚本9-9.html 1KB
脚本8-5.html 1KB
iframeB.html 1KB
脚本10-12.html 1KB
脚本10-10.html 1KB
脚本8-1.html 1KB
脚本8-4.html 1KB
脚本4-5.html 979B
脚本8-3.html 947B
脚本3-8.html 912B
脚本9-10.html 897B
脚本4-4.html 892B
脚本9-7.html 865B
脚本5-2.html 854B
脚本7-6.html 771B
脚本6-3.html 729B
脚本9-8.html 708B
脚本3-22.html 686B
脚本9-3.html 685B
脚本3-23.html 672B
脚本9-6.html 656B
脚本3-25.html 642B
脚本9-4.html 642B
脚本3-11.html 633B
脚本9-1.html 630B
脚本4-2.html 626B
脚本6-4.html 624B
脚本9-2.html 619B
脚本2-12.html 604B
脚本7-7.html 597B
脚本3-21.html 585B
脚本2-19.html 581B
脚本3-20.html 578B
脚本3-1.html 564B
脚本3-26.html 558B
脚本8-2.html 551B
脚本3-15.html 547B
脚本6-5.html 536B
脚本2-14.html 501B
脚本3-4.html 500B
脚本2-13.html 495B
脚本6-17.html 488B
脚本3-3.html 486B
脚本2-16.html 477B
脚本4-8.html 476B
脚本7-3.html 468B
脚本3-13.html 466B
脚本6-7.html 451B
脚本3-30.html 448B
脚本3-24.html 430B
脚本6-2.html 424B
脚本4-3.html 418B
脚本2-8.html 414B
脚本6-18.html 406B
脚本6-6.html 396B
脚本3-5.html 392B
脚本3-9.html 391B
脚本3-7.html 391B
toc.html 385B
脚本2-18.html 385B
脚本3-17.html 383B
脚本2-17.html 380B
topic.html 379B
脚本4-1.html 379B
脚本6-8.html 373B
脚本2-11.html 371B
脚本3-16.html 367B
脚本6-1.html 361B
脚本6-12.html 338B
脚本7-5.html 333B
脚本3-27.html 329B
脚本6-14.html 322B
脚本2-15.html 310B
共 160 条
- 1
- 2
资源评论
BryanDing
- 粉丝: 299
- 资源: 5584
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- RAG技术知识图谱概览
- VMware Workstation功能强大的桌面虚拟计算机软件
- 中文命名实体识别,采用bilstm+crf模型基于Pytorch实现
- PowerGREP V5.3.3 Retail
- 美赛数学建模算法-使用Matlab实现灰色系统建模GreySystem-国赛-题解.zip
- 基于albert-bilstm-crf架构利用keras框架实现NER
- RegexMagic V2.13.1 Retail
- python-3.6.5-macosx 安装包
- 美赛数学建模算法-使用Matlab实现图论GraphTheory-包括求最短路径-国赛-题解.zip
- RegexBuddy v4.14.1 Retail
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功