为什么我的自制下拉列表在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

你的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结构.我在IE9中测试过这个问题,但是在IE7中没有测试但是我怀疑它也能用.