为什么我的JQuery淡入滑块不适用于任何IE类型？

Question

我的JQuery滑块在IE中不起作用（在任何文档模式中）。 我怎么能解决这个问题？ 按下按钮后，我的代码会向下滑动一段文本（它也很好地淡入）。 IE控制台给我这个错误： "Object doesn't support property or method 'fadingSlideToggle'".

(function ($) {
    $.fn.fadingSlideToggle = function ($el, options) {
        var defaults = {
            duration: 500,
            easing: 'swing',
            trigger: 'click'
        };

        var settings = $.extend({}, defaults, options)
        $selector = $(this).selector;

        return this.each(function () {
            var $this = $(this);

            $(document).on(settings.trigger, $selector, function (e) {
                e.preventDefault();
                if ($($el).css('display') == 'none') {
                    $($el).animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, settings.duration, settings.easing);
                } else {
                    $($el).animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, settings.duration, settings.easing);
                }
            });
        });
    };
})(jQuery);

我想知道哪个部分不受支持，以及如何解决它。 非常感谢！

编辑：这是我调用该函数的代码（它适用于firefox和chrome）：

 <button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span>        </button></br>
 <nav role="navigation" id="toggleEl">/*non relevant html*/</nav>

其余的javascript：

  $(function(){
   $('#clickedEl').fadingSlideToggle('#toggleEl');
  });

JSFiddle在IE中不起作用： http ： //jsfiddle.net/3ymvv

Answer 1

问题似乎来自jQuery 1.10.1（ ＃13936 ＃13980 ）。 这是我们得到的错误：

访问被拒绝 - jQuery-1.10.1.js，行：1513，列：2

和相关的行：

// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) { // :1513   
    parent.attachEvent( "onbeforeunload", function() {
        setDocument();
    });
}

这种情况发生得很早，可能会阻止您的脚本加载。

将jQuery更新到1.11.0版本（或更多版本）， 您将看到它的工作原理 。

Answer 2

当我在Windows XP中测试时，ie8和旧版本的firefox表现出相同的行为（当#clickeEl首次点击时它突然出现）。 删除<nav>元素并只使用<ul>元素似乎解决了这个问题。 然后我意识到问题是标签<nav> ，ie8和firefox都不知道。 如本文所述，浏览器不知道<nav>是块元素。 所以加入

nav { display:block }

在windows xp的ie8中解决了我的问题。

演示

实际上，不确定这是多么兼容，但似乎插件正在做一些不必要的东西，因为它使用的是jQuery。 所以我在下面加了一点。 （大多数情况下，我不得不在CSS中使用ID而不是插件本身设置display:none 。

提议的变更

Answer 3

在这里，我们显然不知道问题可能在哪里。

1. 你的代码看起来很好。
2. 请告诉我们您使用插件的代码
3. 在那里使用你的插件，检查插件是否定义了console.log($.fn.fadingSlideToggle)
4. 检查您调用插件的对象实际上是否是有效的jQuery对象。 console.log(obj instanceof jQuery)或(!!obj.jquery && typeof obj.jquery === "string")

一个jquery对象usualy有一个名为jquery的属性，其中包含当前的jQuery版本。 jquery对象通常也是jQuery Object本身的一个实例。 但请记住，使用.noconflict()可能没有全局变量jQuery或$

Answer 4

问题是小提琴中的jQuery加载。 只需从CDN加载jQuery，然后启动您的插件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  // your plugin
</script>

现在它在IE 8+中运行良好。

Answer 5

你有没有机会有一个id为fadingSlideToggle的html元素？ 这可能是这里解释的问题： https ： //stackoverflow.com/a/14003088/561957