<!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>catalog</title><style type="text/css"> li{list-style:none;}a{color:black;text-decoration:none;}#catalog{ background-color:red; padding-right:25px; margin-right:20px; float:left;}</style><script type="text/javascript"> var myBoolean = new Boolean(true); function showTree(){ var tree = document.getElementById("tree"); var list = document.getElementById("list"); if(myBoolean == true) { tree.value="-"; list.style="display:block;"; myBoolean=false; } else { tree.value="+"; list.style="display:none;"; myBoolean=true; } }</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree" onclick="showTree()" />帮助文档：</li> <ul id="list" style="display:none;" > <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li> </ul></ul></div><div id="content"><iframe name="content" width="1024" height="768" frameborder="0" ></iframe></div></body></html>
if(myBoolean == true)
{
tree.value="-";
list.style.display="block";
myBoolean=false;
}
else
{
tree.value="+";
list.style.display="none";
myBoolean=true;
}
改成下面的就好了
IE8 IE 9 FF 都可以
写那么多，只要一句就可以实现了。。
<!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>catalog</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style type="text/css"> li{list-style:none;}a{color:black;text-decoration:none;} #catalog{ background-color:red; padding-right:25px; margin-right:20px; float:left;} </style> <script type="text/javascript"> $(function () { $('#tree').bind('click', function () { $('#list').toggle(); }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档：</li> <ul id="list" style="display:none;" > <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li> </ul></ul></div><div id="content"><iframe name="content" width="1024" height="768" frameborder="0" ></iframe></div> </body></html> 另外，你的结构是有问题的。ul 里面写ul,那么第二个ul应该在li里面
你的不符合标准。
<script type="text/javascript"> $(function () { var ss = $('#catalog').find('li').not($('#catalog').find('li').eq(0)); ss.hide(); var x = 0; $('#tree').click(function () { if(x == 0) { ss.show(); $('#tree').val('-'); x = 1; } else { ss.hide(); $('#tree').val('+'); x = 0; } }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档：</li> <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li></ul></div>
另外，你的结构是有问题的。ul 里面写ul,那么第二个ul应该在li里面
你的不符合标准。
<script type="text/javascript"> $(function () { var ss = $('#catalog').find('li').not($('#catalog').find('li').eq(0)); ss.hide(); var x = 0; $('#tree').click(function () { if(x == 0) { ss.show(); $('#tree').val('-'); x = 1; } else { ss.hide(); $('#tree').val('+'); x = 0; } }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档：</li> <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li></ul></div>
