このコードは Firefox では実行できますが、IE8 では実行できません。解決してください。 _html/css

このコードは Firefox では実行できますが、IE8 では実行できません。解決してください。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:29

オリジナル

1251 人が閲覧しました

互換性に問題があるかどうかを専門家に確認してください。そうであれば、コードを変更するにはどうすればよいですか?ひざまずいて感謝します。

ディスカッションへの返信 (解決策)

if(myBoolean == true)

list.style.display="block";
myBoolean=false }
else
{
tree.value="+";
}
次のように変更するだけです

IE8 IE 9 FF が使用できます

これだけの内容を書くことができ、たった 1 文で実現できます。。

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

ログイン後にコピー

また、あなたの構造に何か問題があります。 ul の中に ul が書かれている場合、2 番目の ul は li の中にある必要があります

あなたのものは基準を満たしていません。

修正:

<!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 が書かれている場合、2 番目の 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>

ログイン後にコピー

思い出させてくれてありがとう、この構造的な問題を修正します。