HTML树形菜单伸缩问题

HTML树形菜单伸缩问题,第1张

<br><SPAN><IMG id="Image_Closed" style="DISPLAY: none" onclick="this.style.display='none'

Text_Closed.style.display='inline'

Image_Open.style.display='inline'

Text_Open.style.display='inline'"

src="pic/m_o.gif"><IMG id="Image_Open<%= i %>" onclick="this.style.display='none'

Image_Closed.style.display='inline'

Text_Open.style.display='none'

Text_Closed.style.display='inline'"

src="pic/m_c.gif"></SPAN>

<SPAN id="Text_Closed">大目录

<SPAN id="Text_Open" style="DISPLAY: none">'主要是这句话进行修改下

<SPAN>

<br> <IMG src="pic/m_c.gif" />小目录<br>

</SPAN>

</SPAN>

</SPAN>

只需要在<div class="content" ><a href="http://www.alixixi.com">www.alixixi.com</a></div>

这里改成<div class="content" style="display:none"><a href="http://www.alixixi.com">www.alixixi.com</a></div>

完整代码如下:

<!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-Type" content="text/htmlcharset=utf-8" />

<style type="text/css">

*{margin:0padding:0}

body{ font-family:Arial, Helvetica, sans-seriffont-size:12pxcolor:#666}

#box{width:200pxborder:1px solid #ccc}

.title{ font-size:12pxpadding-left:3pxheight:20pxborder-bottom:1px solid #fffbackground:#000line-height:20pxcolor:#FFFcursor:pointer}

.content{ padding:5pxheight:150px}

</style>

<script type="text/javascript">

function flexMenu(id)

{

var $id = document.getElementById(id)

var titleList = $id.getElementsByTagName('h2')

var contentList = $id.getElementsByTagName('div')

titleList[titleList.length-1].style.border = 'none'

for(var i=0i<titleList.lengthi++)

{

titleList[i].onclick = function()

{

for(var a=0a<contentList.lengtha++)

{

contentList[a].style.display = 'none'

}

if(this.nextSibling.nodeType=='3')

{

this.nextSibling.nextSibling.style.display = ''

}else

{

this.nextSibling.style.display = ''

}

}

}

}

window.onload = function(){ flexMenu('box')}

</script>

<title>flex menu</title>

</head>

<body>

应有尽有的网页特效网址:<a href="http://js.alixixi.com">http://js.alixixi.com</a>

<hr />

<div id="box">

<h2 class="title">阿里西西</h2>

<div class="content" style="display:none"><a href="http://www.alixixi.com">www.alixixi.com</a></div>

<h2 class="title">站长工具</h2>

<div class="content" style="display:none"><a href="http://tool.alixixi.com">站长工具</a></div>

<h2 class="title">网页特效</h2>

<div class="content" style="display:none"><a href="http://js.alixixi.com">站长工具</a></div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>555</title>

<style type="text/css">

p { 

    width:100px 

    height:24px 

    overflow: hidden 

    text-overflow: ellipsis

    white-space: nowrap 

}

</style>

</head>

<body>

<p title="fhdniojacnjdikoeacnedioksanjkocnjdiwoqncdjiokanjkcodsnjaiocndjwioqjdcniosancjdosanjio">fhdniojacnjdikoeacnedioksanjkocnjdiwoqncdjiokanjkcodsnjaiocndjwioqjdcniosancjdosanjio</p>

</body>

<script type="text/JavaScript">

</script>

</html>

加一个 title属性,里面的值给你要显示的内容,这样的话鼠标放上去,会全部显示内容。

这应该是最简单的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7071883.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存