jQuery下拉菜单 <li> 链接在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();
});