Почему мой самодельный выпадающий список не работает в IE 7 - PullRequest
0 голосов
/ 07 декабря 2011

Код прекрасно работает в других браузерах, но не в 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? Спасибо.

1 Ответ

5 голосов
/ 07 декабря 2011

Ваш 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, но я подозреваю, что это тоже будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...