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');
  });

在IE中无效的JSFiddle：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版本（或更高版本）和you'll see it works。

Answer 2

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

nav { display:block }

在windows xp中的ie8修复了我的问题。

Demo

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

Proposed Changes

Answer 3

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

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

jquery对象通常有一个名为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

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

5 个答案: