三级级联菜单

来源：互联网发布：mac好用的音乐播放器编辑：程序博客网时间：2024/05/21 10:45
<html><head><title>index</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script></head><style>#thekeyword{border-top:2px solid #000000;border-bottom:2px solid #000000;}.key{display:block;text-align:center;line-height:50px;height:50px;width:100%;}.key:hover{background-color:#DCDCDC;color:#000000;-webkit-transition: all ease 0.2s;-moz-transition: all ease 0.2s;-o-transition-delay: all ease 0.2s;transition: all ease 0.2s}#ckey{display:none;float:left;width:90%;}#first{float:left;width:30%;}#second{position:relative;float:left;width:30%;}#third{position:relative;float:left;width:30%;}.op0,.op1,.op2{text-align:center;line-height:50px;display:block;height:50px;border-right:2px solid #DCDCDC;-webkit-transition: all ease 0.2s;-moz-transition: all ease 0.2s;-o-transition-delay: all ease 0.2s;transition: all ease 0.2s}.op0{text-align:center;line-height:50px;display:block;height:50px;border-left:2px solid #DCDCDC;}.op0:hover,.op1:hover,.op2:hover{-webkit-transition: all ease 0.2s;-moz-transition: all ease 0.2s;-o-transition-delay: all ease 0.2s;transition: all ease 0.2s}textarea{height:200px;width:80%;border:1px solid #DCDCDC;border-radius:3px;}</style><body><button id="test">choose</button><br><div id="ckey"><div id="first"></div><div id="second"></div><div id="third"></div></div><!--最终存放关键字的textarea--><textarea name="keyword" id="keyword"></textarea><br><span>点击移除 最多添加三个(可自定义)</span><!--thekeyword一个框来显示已经选择的关键字--><div id="thekeyword"></div><!------------------------------------------><button onclick="arrange()">arrange()</button></body><script>var firstArray=eval(["while和do-while","表达式","数组","for","if-else"]);    var secondArray=eval([["循环控制"],["基本数据类型与表达式","正则表达式"],["二维数组"],["循环控制"],["分支控制"]]);    var thirdArray=eval([[["C程序设计"]],[["C程序设计","Java程序设计"],["C程序设计","Python程序设计"]],[["C语言程序设计"]],[["C程序设计","Java程序设计"]],[["C程序设计","Java程序设计"]]]); //滑动出现$('#test').click(function(){$('#ckey').slideToggle();});//实现级联$(document).ready(function(){//height为每个op高度var height = 50;var firstnumber = 0;var secondnumber = 0;var color1 ="#FFFFFF";var color2="#DCDCDC";//显示一级数据for(var i=0;i<firstArray.length;i++){$('#first').append("<a class=\"op0\" ordernumber=\""+i+"\">"+firstArray[i]+"</a>");            }$('.op0').mouseenter(function(){//alert($(this).attr('ordernumber'));//重置其他选项的颜色$(".op0").css({"background-color":color1});//设置当前选项颜色$(this).css({"background-color":color2});//当前选项序号firstnumber = $(this).attr('ordernumber');//显示选中一级选项对应的二级选项//清空二级框内的内容$('#second').html("");$('#third').html("");//相对向下偏移 theheight是每个op的高度$('#second').css("top",height*firstnumber);for(var i=0;i<secondArray[firstnumber].length;i++){$('#second').append("<a class=\"op1\" ordernumber=\""+i+"\">"+secondArray[firstnumber][i]+"</a>");}//-----------------------二级-------------------------------------------$('.op1').mouseenter(function(){//重置其他选项的颜色$(".op1").css({"background-color":color1});//设置当前选项颜色$(this).css({"background-color":color2});//当前选项序号secondnumber = $(this).attr('ordernumber');//显示选中二级选项对应的三级选项$('#third').html("");$('#third').css("top",height*firstnumber+height*secondnumber);for(var i=0;i<thirdArray[firstnumber][secondnumber].length;i++){//每个三级选项都有一个独一无二的 thenumber 添加到textarea时会进行比对是否存在重复$('#third').append("<a class=\"op2\" thenumber=\""+firstnumber+""+secondnumber+""+i+"\" number0=\""+firstnumber+"\" number1=\""+secondnumber+"\" number2=\""+i+"\" >"+thirdArray[firstnumber][secondnumber][i]+"</a>");}//----------------------三级-----------------------------------------$('.op2').mouseenter(function(){//重置其他选项的颜色$(".op2").css({"background-color":color1});//设置当前选项颜色$(this).css({"background-color":color2});//点击选项 添加关键字$(this).click(function(){var num0 = $(this).attr('number0');var num1 = $(this).attr('number1');var num2 = $(this).attr('number2');var thenumber = $(this).attr('thenumber');//如果没有重复的 添加//函数checkkey() 将点击选项的thenumber与已经添加的thenumber进行比较if(checkkey(thenumber)){$('#thekeyword').append("<a class=\"key\" thenumber=\""+thenumber+"\">"+firstArray[num0]+"->"+secondArray[num0][num1]+"->"+thirdArray[num0][num1][num2]+"</a>");//点击删除已添加的关键字$('#thekeyword a').click(function(){$(this).remove();});}});//-----------------------------});//----------------------三级结束-----------------------------------------});//-----------------------二级结束------------------------------------});});//避免重复添加//点击三级op时检查是否已经添加//已经添加return false 未添加return truefunction checkkey(number){//ifadded来记录是否已经添加 默认未添加var ifadded = true;//numb计数添加的关键字个数var numb = 0;//最多允许添加的关键字数var max = 3;$('#thekeyword a').each(function(){numb++;if($(this).attr('thenumber')==number){ifadded = false;}});if(numb>=max){return false;}if(ifadded){//未添加return true;}else{//已添加return false;}}//整理已添加关键字 将其显示在thekeyword中function arrange(){//在每一项之间添加间隔符var blank = "@#!";vartext = $('#keyword').val();$('#thekeyword a').each(function(){text = text +blank+ $(this).text();});$('#keyword').val(text);}</script></html>
阅读全文
0 0