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