.toggle() 不适用于 IE9答案

【问题标题】：.toggle() does not work with IE9.toggle() 不适用于 IE9
【发布时间】：2015-04-29 15:51:27
【问题描述】：

我想在点击链接时显示一些信息，您可以在此处找到：http://jsfiddle.net/t4f8yer0/1/

html:

<a href="#" class="more">show more</a> <br>
<div class="toggle">
this is more
</div>

js:

$(document).ready(function(){
  $(".toggle").css('display','none');

  $( ".more" ).click(function() {
    $(event.target).next().next().toggle( "slow" );
  });
});

这适用于 chrome 和 IE edge，但不适用于 IE9 或 IE10。这个问题有解决办法吗？

【问题讨论】：

感谢 Woodsy、j08691 和 Ted！

标签： jquery internet-explorer-9 toggle

【解决方案1】：

代替：

$(event.target);

使用：

$(this);

jsFiddle example

不同版本的 IE 存在 jQuery 规范化的问题，例如您在 event.target 中看到的问题。

【讨论】：

【解决方案2】：

我更改了您的代码以引用 toggle div 类，它似乎可以正常工作。

$(document).ready(function(){
    $(".toggle").css('display','none');

    $( ".more" ).click(function() {
        $(".toggle").toggle("slow");
    });
});

【讨论】：

这行得通，但问题是如果你有多个这样的元素，它也会对所有其他元素产生影响。因此，这不是完美的解决方案。

【解决方案3】：

对于这个 HTML：

<a href="#" class="more" data-target="#more1">show more</a> <br>
<div id="more1" class="toggle" style="display:none;">
    this is more
</div>

这个JS：

$(document).ready(function(){
    $( ".more" ).click(function() {
        var tgt = $(this).attr('data-target');
        $(tgt).toggle( "slow" );
    });
});

这允许您设置切换目标。 See it work here

【讨论】：