这个用于切换div的JQuery代码在IE7中不起作用，但在其他浏览器中有效

Question

这是我的问题，我有一个jquery在现代浏览器中运行良好，但在IE7中不起作用。

这个想法是当你点击<标签，名为"innerdetails"的div将打开。

这是我的HTML:

<ul class="table">
<li><a href="#">CLICK HERE</a></li>
<li><a href="#">Techniques</a> </li>
<li >3</li>
<div class="innerdetails">
   Technical services, including MARC.
</div>
</ul>

以下是有问题的Jquery代码。

$(document).ready(function() {
    $("ul.table li a").click(function() {
    $(this).parent("li").parent("ul").children(".innerdetails").toggle();
    alert ( $(this).parent("li").parent("ul").children(".innerdetails").length )
    return false;
    });
});

有趣的是，在警报中，IE7返回"0"作为.childs（".internal course details"）的长度

Chrome返回"1"

Answer 1

问题可能是因为这不是有效的HTML（ul标记不能包含div标记），所以IE7可能不认为它是DOM树的一部分。

要修复此问题，请尝试将div放在li标记中（或仅使用li标记），然后将.toggle()放在li中。

Answer 2

我不知道确切的原因，但如果您将children更改为find，它可以

$("ul.table li a").click(function() {
    $(this).parent("li").parent("ul").find(".innerdetails").toggle();
    alert ( $(this).parent("li").parent("ul").find(".innerdetails").length )
    return false;
});

还有小提琴http://jsfiddle.net/6heVt/2/