爲什麼我的自制下拉列表在IE 7中不起作用

Question

代碼在其他瀏覽器中完美工作，但在IE7中完美無缺。 IE7中的問題是列表的第二級（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

您的網頁無效。我了，使得它在這個小提琴正確所需的變革：

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結構那樣嚴格。我在IE9中測試了這個問題，它提出了相同的問題，沒有在IE7中測試過，但我懷疑它也能起作用。