IE9 中 jquery 的问题 ( .slidedown()， .hide() )

Question

我试图在单击上面的链接后将隐藏的div获取到.slideDown（）/.slideUp（）。div 具有显示属性"隐藏"。它在每个浏览器中都运行良好，但IE9除外。当我在IE9中单击我的链接时，没有任何反应，这意味着隐藏的div没有显示。但是，如果我将div 的显示属性设置为"可见"，它会很好地切换。我尝试了.show（）/.hide（）和.toggle（），但我得到了相同的结果。知道如何解决这个问题吗？

这是我的 HTML 代码

<span class="toggle">
<li id="toggler">
    <a id="atoggler1" href="#">
        '.$info['category'].'
    </a></li></span>
<div class="hiddenDiv">
<p>
    $info['description']
</p>
.....
.....
 </div>

这是我的CSS代码

.hiddenDiv{
    display: none;
 }

这是我的 JavaScript

$(document).ready(function() {
$(".toggle").click(function () {
    // check the visibility of the next element in the DOM
    if ($(this).next().is(":hidden")) {
        $(this).next().slideDown("fast"); // slide it down
        return false;
    } else {
        $(this).next().slideUp("fast"); // hide it
        return false;
      }
  });
});

同样只是为了记录，我的HTML代码被包裹在php代码中。为了清楚起见，我没有包括这一点。

如何解决这个问题？或者我的选择是什么？

Answer 1

在修复 HTML 中缺少的关闭div 并修改代码以针对正确的div 后，这在 IE9 中对我来说工作正常：

$(document).ready(function() {
    $(".toggle").click(function () {
        $(this).closest(".toggle").next().slideToggle("fast");
        return(false);
    });
});​

工作演示：http://jsfiddle.net/jfriend00/d3TX9/

1. 您的问题中的 HTML 没有隐藏 Div 的结束</div>
2. 我确保无论单击发生在哪里，它都会从.toggle对象执行.next()。
3. 为了简单起见，我切换到slideToggle()。

Answer 2

> $(this).next() 来自

<span class="toggle">

是

<li id="toggler">

而不是你想展示的是什么

<div class="hiddenDiv">

根据您的标记。如果您使用

$('#toggler').find('.hiddenDiv') 

相反，这应该解决问题

Answer 3

由于某种原因，如果我的 CSS 文件的链接标签在 HTML 标签内，它不起作用。但是如果我把它们放在外面，它就会扰乱我的造型。在做了大量的研究之后，我发现jQuery或IE9中有一个错误。当我运行控制台时，当我单击链接时，我收到无效的呼叫错误。这个错误出现在我的jQuery代码中。电话很this.appendChild( elem );但要修复它，我不得不将其更改为 this.parentNodeappendChild( elem ); 并修复了它。

因此，如果将来其他人遇到此问题，请按照以下方法解决它：

1. 根据您的 jQuery 版本，通过运行控制台检查有错误的行
2. 转到该行并将this.appendChild( elem );更改为this.parentNode.appendChild( elem );