Home >Web Front-end >HTML Tutorial >这段代码能在火狐运行，不能在IE8上运行，求解。_html/css_WEB-ITnose
这段代码能在火狐运行，不能在IE8上运行，求解。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:291257browse
<!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> 多谢提醒，我会修正这个结构问题。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3太极图效果+自动旋转_html/css_WEB-ITnoseNext article：bootstrap 分页样式代码_html/css_WEB-ITnose