为什么我自己做的下拉列表不能在ie7中工作

Why my self made drop down list doesn't work in IE 7

本文关键字：ie7 工作 不能 下拉列表 我自己 自己做 为什么      更新时间：2023-09-26

代码在其他浏览器中运行良好，但在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兼容?谢谢。

你的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中测试过，但我怀疑它也会起作用。

相关文章：