为什么我的 JQuery 渐变滑块在任何IE类型的浏览器上都不起作用？

Question

我的 JQuery 滑块在IE浏览器中无法工作（无论是哪种文档模式）。我该如何解决这个问题？我的代码会在按下按钮后下滑文本的div（还有一个漂亮的淡入效果）。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');
  });

不支持IE浏览器的JSFiddle： http://jsfiddle.net/3ymvv。

- user3353408

---

你能贴出使用代码吗？ - Sean Johnson

请您确认一下是否有多次调用了jQuery库？这样可能会用一个空的副本覆盖您修改过的版本。 - scragar

你添加的HTML中没有显示调用jQuery插件的代码。 - Luke

@Luke 对不起，我又编辑了一次。 - user3353408

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版本（或更高版本），您将看到它可以正常工作。

- zessx

---

找到了相同的事情，但是这个人显然比我更快。给这个人你的50分吧，这里有一个演示来证明：http://jsfiddle.net/3ymvv/10/。 - myfunkyside

Answer 2

当我在Windows XP上测试时，IE8和旧版本的Firefox表现出相同的行为（它会在第一次单击#clickeEl时突然出现）。 删除<nav>元素，只使用<ul>元素似乎可以解决问题。 然后我意识到问题是标签<nav>在IE8和Firefox中不被识别。 如this article所述，浏览器不知道<nav>是一个块级元素。 因此添加

nav { display:block }

解决了在Windows XP的ie8上出现的问题。

演示

实际上，不确定这有多兼容，但似乎插件正在做一些不必要的事情，因为它使用了jQuery。所以我稍微添加了一点内容。（主要是让我感到困扰，你必须在CSS中使用ID设置display:none而不是插件本身。）

建议更改

- mfirdaus

Answer 3

问题在于fiddle中的jQuery加载。只需从CDN加载jQuery，然后启动您的插件即可。

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

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

- raphaelRauwolf

Answer 4

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

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

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

- Luke

---

我这样调用它：<script src="jquery/jquery.fadingslidetoggle.js"></script>，然后剩下的内容在我的原始帖子中进行编辑。 - user3353408

上面的代码是在加载jQuery之后定义的吗？您是否正在加载多个jQuery？此外，如果您在插件中间放置console.log（'plugin'）会在控制台中显示吗？ - Thierry Blais

我想我已经问过5次了。你能否展示一下你实际使用 $(".someSelector").fadingSlideToggle() 或类似的JavaScript代码呢？ - Luke

这是一个包含所有内容的 JSFiddle: http://jsfiddle.net/gh/gist/jquery/1.10.1/6769183/ - user3353408

在这个代码编辑器中插件丢失。 - Luke

Answer 5

你是否有一个id为fadingSlideToggle的html元素？这可能是问题所在，如此处所述：https://dev59.com/J2Yr5IYBdhLWcg3wE2Sz#14003088

- Mr. Smee