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

JQuery下拉菜单<li>链接在Internet Explorer中不起作用</li>

2 个答案: