li点击问题

shinos1979 2010-09-27 06:25:00

<li id="foldheader">菜单</li>
下面有ul什么的，点击最左边的小黑点，下面菜单可以展开，而改成：
<li><span id="foldheader">菜单</span></li>或者
<li id="foldheader"><a href="#">菜单</a></li>或者
<li><a id="foldheader" href="#">菜单</a></li>
点击最左边的小黑点都展不开，
点击“菜单”文字，下面可以展开。
不知道写的有什么问题，请指教，谢谢！

...全文

170 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

浴火_凤凰 2010-09-29

打赏
举报

自己写一些吧

natici 2010-09-28

打赏
举报

问题在于这段js：



function change(){

	if(!document.all)

	return

	if (event.srcElement.id=="foldheader") {

		alert(event.srcElement.sourceIndex);

		var srcIndex = event.srcElement.sourceIndex

		var nested = document.all[srcIndex+1]

		if (nested.style.display=="none") {

			nested.style.display='';

			event.srcElement.style.liststyleImage="url(../../image/open.gif)"

		}

		else {

			nested.style.display="none";

			event.srcElement.style.liststyleImage="url(../../image/fold.gif)"

		}

	}

}

如果lz只是想要实现点击菜单后展开和隐藏的效果，那么可以用dtree。而且这段js不支持ie以外的浏览器，存在兼容性问题。

shinos1979 2010-09-28

打赏
举报

多谢各位了！

shinos1979 2010-09-28

打赏
举报

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<title>

</title>

<script language="javascript">

var head="../../image/display:''"
img1=new Image()
img1.src="../../image/fold.gif"
img2=new Image()
img2.src="../../image/open.gif"
function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {

var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display='';
event.srcElement.style.liststyleImage="url(../../image/open.gif)"
}
else {
nested.style.display="none";
event.srcElement.style.liststyleImage="url(../../image/fold.gif)"
}
}
}
document.onclick=change

function sub(ObjName){
}
</script>

<SCRIPT type="text/javascript">
var checkflag="false";
function check(field){
if(checkflag=="false"){
for(i=0;i<field.length;i++){
field[i].checked = true;}
checkflag="true";
//return "全部选定";
}
else {
for(i=0;i<field.length;i++) {
field[i].checked = false;}
checkflag="false";
//return "全部取消";
}}
</script>

<style type="text/css">

li {
font-family: "宋体", "新宋体";
font-size: 9pt;
line-height: 13pt;
margin-left:4px
cursor: hand;
}
#foldheader{
cursor:hand;
list-style-image:url(../../image/fold1.gif);
font-family: "宋体", "新宋体";
font-size: 10pt;
margin-left:4px
}
#foldinglist{
list-style-image:url(../../image/open1.gif);
font-family: "宋体", "新宋体";
font-size: 9pt;
margin-left:15px
}
BODY {
SCROLLBAR-FACE-COLOR: #6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #A6C4E1;
SCROLLBAR-SHADOW-COLOR: #A6C4E1;
SCROLLBAR-3DLIGHT-COLOR: #A6C4E1;
SCROLLBAR-ARROW-COLOR: #A6C4E1;
SCROLLBAR-TRACK-COLOR: #A6C4E1;
SCROLLBAR-DARKSHADOW-COLOR: #A6C4E1;
}

A { text-decoration:none; }
A:link { text-decoration:none; color: #000066; }
A:visited { text-decoration:none; color: #000033; }
A:hover {
text-decoration:underline;
color: #FF0000;
}
</style>
<link href="/ycti.css" rel="stylesheet" type="text/css">
<link href="/css/button.css" rel="stylesheet" type="text/css">
<link href="/css/newfont.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>

</head>
<body >

<form name="form1" action="" method="post">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#1A4381" class="font3">

<tr bgcolor="e2f1f5" align="top" >
<td valign="top" width="30%">

<fieldset style="width:100%" align="left">
<legend class="105font">请选择:</legend>

<dl class="pt12normal">
<li id="foldheader">菜单</li>
<dl id="foldinglist" style="display:none">

<li><a href="#"><span id="foldheader">菜单1</span></a></li>
<dl id="foldinglist" style="display:none">

<li><a href="#"> 菜单11</a></li>

<li><a href="#"> 菜单12</a></li>

</dl>

</dl>
</dl>
</fieldset>
</td>

</tr>

</table>
</form>
</body>
</html>

yingying901029 2010-09-28