自分のドロップダウンリストがIE 7で動作しない理由

Question

他のブラウザでは完全に動作しますが、IE7では完全に動作しません。 IE7の問題は、リストの第2レベル（ul .opt_1）が最初のレベルが選択されても表示されないことです。ここ はHTMLの一部です：

<input type="button" id="topic" value="please select a topic"/> 
<div class="c"></div> 
<ul id="opt_0"> 
<li class="opt_0">finance</li> 
<ul class="opt_1"> 
<li>business</li> 
<li>stock</li> 
<li>company</li> 
<li>startup</li> 
</ul> 
<li class="opt_0">IT</li> 
<ul class="opt_1"> 
<li>internet</li> 
<li>code</li> 
<li>hardware</li> 
</ul> 
</ul> 
<input type="hidden" name="topic"/> 

とJSの一部：

$(function(){ 
$("#topic").click(function(){ 
    $("#opt_0").slideDown(); 
}) 
$(".opt_0").click(function(){ 
     $(".opt_0").removeClass("selected"); 
     $(this).addClass("selected"); 
     $(".opt_1").hide(); 
     $(this).next(".opt_1").show(); 
    }) 
$(".opt_1 li").click(function(){ 
    $("#opt_0").slideUp(); 
    $("#topic").val($(".selected").html()+">>"+$(this).html()); 
    $("input[name=\"topic\"]").val($(".selected").html()+";"+$(this).html()); 
}) 
}) 

あなたがここにJSのフィドルを見ることができます：http://jsfiddle.net/lornechang/4BmPb/
私はIE7と互換性を持たせるにはどうすればよいですか？ありがとう。

Answer 1

あなたのhtmlは無効です。

http://jsfiddle.net/4BmPb/1/

<input type="button" id="topic" value="please select a topic"/> 
<div class="c"></div> 
<ul id="opt_0"> 
    <li class="opt_0">finance</li> 
    <li class="opt_1"> 
     <ul> 
      <li>business</li> 
      <li>stock</li> 
      <li>company</li> 
      <li>startup</li> 
     </ul> 
    </li> 

    <li class="opt_0">IT</li> 
    <li class="opt_1"> 
     <ul> 
      <li>internet</li> 
      <li>code</li> 
      <li>hardware</li> 
     </ul> 
    </li> 
</ul> 
<input type="hidden" name="topic"/> 

ul要素がli要素ではなく、他のulの要素のみを含めることができます。私はこのフィドルで、それが正しいにするために必要な変更を加えました。

他のブラウザで動作する理由は、他のブラウザほどIEほどHTML構造では厳しくありません。私は同じ問題を呈しIE7でテストしなかったIE9でこれをテストしましたが、うまくいくと思います。