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中进行过测试，但我怀疑它也能正常工作。

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

1 个答案: