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

Posted 2023-05-09

【中文标题】此用于切换 div 的 JQuery 代码在 IE7 中不起作用，但在其他浏览器中起作用

【英文标题】：This JQuery code to toggle a div doesn't work in IE7, but works in other browsers

【发布时间】：2012-04-04 12:00:06

【问题描述】：

这是我的问题，我有一段 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”作为 .children(".inner-course-details") 的长度

Chrome 返回“1”

【参考方案1】：

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

要解决此问题，请尝试将div 放在li 标记内（或仅使用li 标记），然后将.toggle() 与li 结合。

【参考方案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;
);

还有 jsfiddle http://jsfiddle.net/6heVt/2/