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

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

php中文网

发布： 2016-06-24 11:33:29

原创

1413人浏览过

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

登录后复制

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

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

回复讨论(解决方案)

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>

登录后复制

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