为什么我的自制下拉列表在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中测试过，但我怀疑它也能起作用。