javascript - jQuery 下拉菜单链接在 Internet Explorer 中不起作用

Question

我最近从这个开发者的网站实现了一个 jQuery 下拉列表：http: //tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/，它在我的 Chrome 网站上看起来和工作正常Firefox（我的网站是：http ://www.ExpeditionerSafaris.com ）。

但是，在 Internet Explorer（当然）中，li 链接不起作用。

这是代码：

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            event.stopPropagation();
        });
    }
}

$(function () {

    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-5').removeClass('active');
    });

});

Answer 1

我认为您有jquery confliction参考http://api.jquery.com/jQuery.noConflict/的问题

代码有问题

$(function () {//here is problem of `$` conflictions

    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-5').removeClass('active');
    });

});

我检查了它并且代码有错误

Error: TypeError: $ is not a function
Source File: http://www.expeditionersafaris.com/
Line: 426

使用jQuery(function ()代替$(function ()再试试，或者使用jQuery.noConflict()函数

Answer 2

在你的initEvents方法中。不要通过event，因为它与 IE 事件发生冲突，所以让它

obj.dd.on('click', function (evt) {
    //evt is jQuery normalized event object

    $(this).toggleClass('active');
    event.stopPropagation();
});