这段代码能在火狐运行，不能在IE8上运行，求解。_html/css

这段代码能在火狐运行，不能在IE8上运行，求解。_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:33:29

Original

1241 people have browsed it

<!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>

Copy after login

求高手看看，是不是兼容性问题，是的话如何修改下代码？跪谢。

回复讨论(解决方案)

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>

Copy after login

另外，你的结构是有问题的。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>

Copy after login

另外，你的结构是有问题的。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>

Copy after login

多谢提醒，我会修正这个结构问题。