这个是易迅的商城产品分类菜单，请问JS代码怎么实现如下描述的功能，谢谢

2023-02-21 06:14:02JavaScript011

这个是易迅的商城产品分类菜单，请问JS代码怎么实现如下描述的功能，谢谢,第1张

我猜想可能是这样的

获取你点击的分类的位置到底部窗口的高度

然后跟要展开的二级菜单的高度比较

然后根据大小

动态改变要展开的二级分类的top，就可以实现你的要求

<!DOCTYPE html>

<html>

<head>

<title>CSS+JavaScript三级折叠菜单</title>

<style>

*,body,ul,li,h1,h2 {

margin: 0

padding: 0

list-style: none

}

body {

font: 12px "宋体"

padding-top: 20px

}

#menu {

width: 200px

margin: auto

}

#menu h1 {

cursor: pointer

color: #FFF

font-size: 12px

padding: 5px 0 3px 10px

border: #C60 1px solid

margin-top: 1px

background-color: #F93

}

#menu h2 {

cursor: pointer

color: #777

font-size: 12px

padding: 5px 0 3px 10px

border: #E7E7E7 1px solid

border-top-color: #FFF

background-color: #F4F4F4

}

#menu ul {

padding-left: 15px

height: 100px

border: #E7E7E7 1px solid

border-top: none

overflow: auto

}

#menu ul li {

padding: 5px 0 3px 10px

}

.no {

display: none

}

</style>

function ShowMenu(obj, noid) {

var block = document.getElementById(noid)

var n = noid.substr(noid.length - 1)

if (noid.length == 4) {

var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")

var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")

for (var i = 0 i < h2.length i++) {

h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")

h2[i].style.color = ""

}

obj.style.color = "#FF0000"

for (var i = 0 i < ul.length i++) {

if (i != n) {

ul[i].className = "no"

}

} else {

var span = document.getElementById("menu").getElementsByTagName("span")

var h1 = document.getElementById("menu").getElementsByTagName("h1")

for (var i = 0 i < h1.length i++) {

h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")

h1[i].style.color = ""

}

obj.style.color = "#0000FF"

for (var i = 0 i < span.length i++) {

if (i != n) {

span[i].className = "no"

}

if (block.className == "no") {

block.className = ""

obj.innerHTML = obj.innerHTML.replace("-", "+")

} else {

block.className = "no"

obj.style.color = ""

}

</script>

</head>

<body>

<h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>

<h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

<li>一级菜单A_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>

<h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>

<h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

<li>三级菜单C_5</li>

<li>三级菜单C_6</li>

<li>三级菜单C_7</li>

<li>三级菜单C_8</li>

<li>三级菜单C_9</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>

<h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

<li>四级菜单D_4</li>

<li>四级菜单D_5</li>

</ul>

</span>

</div>

</body>

</html>

function CoolMenuControl(){

// 常规变量 this lastScrollX= this lastScrollY= this lastScrollW= this lastScrollH= this td_X= this td_Y= this td_W= this td_H= this td= this mouseon= this current=null this _namethis table_namethis menudiv_namethis menutable_namethis ml= this menuarray=new Array()this speedthis href=""

// 菜单项目 function menuitem(type value url target){ this type=type this value=value this url=url this target=target }

// 插入菜单 this insertmenu=function(type value url target){ this menuarray[this menuarray length]=new menuitem(type value url target) }

// 程序初试化 this init=function(name bdc bgc speed Alpha){ var in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed

for (i= i<this menuarray lengthi++) { if (this menuarray[i] type==" ") cellcount=cellcount+ if (this menuarray[i] type==" " || this menuarray[i] type==" ") {cellcount= } if (lastcellcount<cellcount) {lastcellcount++} }

//alert(cellcount)

stylecode="cursor:handfilter:Alpha(style= opacity="+Alpha+")background color:"+bgc

suspendcode="<DIV id="+this _name+" style= POSITION:absoluteonclick= "+name+" doClick() >" +"<table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" >" +"<tr><td height= style= "+stylecode+" ></td></tr></table></div>"document write(suspendcode)var fcell=true for (i= i<this menuarray lengthi++) { switch(this menuarray[i] type) { case " ": t=cellcount* if (t<= ) { in+= <tr><td colspan= class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td colspan= +t+ class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": t=(cellcount )* if (t<= ) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td width= ><td colspan= +t+ onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": if (fcell) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value fcell=false } else { in+= <td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } break } } in= <div id= +this menudiv_name+ onmousemove=" +name+ doOver()"> + <table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" "> +in + </table></div>//alert(in) document write(in)

this lastScrollX= this lastScrollY= this posXY(eval(this menutable_name) cells[ ]) this td_W=eval(this menutable_name) cells[ ] scrollWidth+ this td_H=eval(this menutable_name) cells[ ] scrollHeight setInterval(name+" scrollback()" ) }

// 单击超连接 this doClick=function(){ //alert(this url) var url=this href split(" ") //alert(url[ ]) //alert(url[ ]) if (url[ ]=="") return

if (url[ ]=="_blank") {window open(url[ ])} else {location href=url[ ]} }

// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y diffW=this td_W diffH=this td_H percentX=this speed*(diffX this lastScrollX)percentY=this speed*(diffY this lastScrollY)percentW=this speed*(diffW this lastScrollW)percentH=this speed*(diffH this lastScrollH)

if(percentX>)percentX=Math ceil(percentX)else percentX=Math floor(percentX)if(percentY>)percentY=Math ceil(percentY)else percentY=Math floor(percentY)if(percentW>)percentW=Math ceil(percentW)else percentW=Math floor(percentW)if(percentH>)percentH=Math ceil(percentH)else percentH=Math floor(percentH)

eval(this _name) style pixelTop+=percentYeval(this _name) style pixelLeft+=percentXeval(this table_name) style pixelWidth+=percentWeval(this table_name) style pixelHeight+=percentH

this lastScrollX=this lastScrollX+percentXthis lastScrollY=this lastScrollY+percentYthis lastScrollW=this lastScrollW+percentWthis lastScrollH=this lastScrollH+percentH}

// 滑出 this doOver=function() { if (event srcElement tagName=="TD") { if (event srcElement innerText length== || event srcElement innerText=="|") return this posXY(event srcElement) this td_W=event srcElement scrollWidth+ this td_H=event srcElement scrollHeight } }

// 绝对定位 this posXY=function(obj){ _left=obj offsetLeft _top=obj offsetTop vParent = obj offsetParent while (vParent tagName toUpperCase() != "BODY") { _left += vParent offsetLeft _top += vParent offsetTop vParent = vParent offsetParent } this td_X=_left this td_Y=_top }

// 关于 this about=function(){ alert("OK") }

} </script>

<head><meta equiv="Content Language" content="zh cn"><style>b{color=# cursor:hand} menu { font family:Arialcursor:Defaultfont size: pxborder: px # solidborder collapse: collapsefilter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd) progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= )} ht{ font weight:bold } </style><! 第一步实体化X Menu类用法: var <实体变量>new CoolMenuControl() ><script language="javascript">var CoolMenu =new CoolMenuControl() var about=new Array() about[ ]="关于X Menu菜单nnAuthor:PuterJamnCopyright n转载请通知本人" about[ ]="关于作者nn"这家伙很懒什么也没留下！！"

</script></head><body><! 第二步建立菜单项目用法: <实体变量>insertmenu(类型 Html代码链接网址目标) 　类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目　Html代码显示在菜单上的Html代码链接网址不用多说了网址或Javascript脚本目标默认为空既不在本页打开 "_blank"代表在新的页面打开例如: CoolMenu insertmenu(" " "<img src=// blueidea /img/icon/arrow gif>新浪网" " "_blank") 　 ><script>CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") </script>

lishixinzhi/Article/program/Java/JSP/201311/19958

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何使用Javascript获取一个链接地址中的顶级域名

# 下一篇：怎样在IE10中调用js的脚本