Question

我有一段jQuery，我没有写，我用来为我网站上的下拉菜单供电。代码工作得很好但不幸的是下拉菜单只显示在点击上，我希望它的选项也显示在悬停上。有没有简单的方法可以使用我现有的代码执行此操作？

HTML

<div class="dropdown">
    Dropdown

    <ul class="dropdown-menu">
        <li>Profile</li>
        <li>Settings</li>
        <li>Log Off</li>
    </ul>
</div>

CSS

.dropdown {
    cursor: pointer;
    outline: none;
    position: relative;
    width: auto;
}

.dropdown .dropdown-menu {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: inherit;
    font-weight: inherit;
    left: 0;
    margin-left: 0px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-transform: none;
    width: 200px;
    z-index: 99999;

    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.dropdown ul.dropdown-menu { list-style-type: none; }

.dropdown .dropdown-menu li {
    display: block;
    padding: 5px 10px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.dropdown .dropdown-menu li:hover { background-color: #f3f8f8; }

.dropdown.dropdown-active .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

的jQuery

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

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

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

$(function () {
    var dd = new DropDown($('.dropdown'));

    $(document).click(function () {

        // Remove class from all dropdowns
        $('.dropdown').removeClass('dropdown-active');
    });
});

Answer 1

试试这个：

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

        // Toggle .dropdown-active on click
        obj.dd.on('mouseenter mouseleave', function (event) {
            $(this).addClass('dropdown-active');
            event.stopPropagation();
        });
    }
}

fiddle

Answer 2

这是jsfiddle：http://jsfiddle.net/xibalbian/kVBLf/

DropDown.prototype = {
  initEvents: function () {
    var obj = this;
    $(".dropdown").hover(function (event) {
  $(this).toggleClass("dropdown-active");
        event.stopPropagation();
    });
  }
}

我已经使用.hover(function(event) {...}以便我可以在课程下拉列表上收听事件，然后切换下拉列表 - 活动类。

编辑＃1 ：在此处查看新的小提琴，http://jsfiddle.net/xibalbian/U8nVH/

DropDown.prototype = {
  initEvents: function () {
    var obj = this;
    $(this).hide();
    $(".dropdown").hover(function (event) {
      $(this).addClass("dropdown-active");
        event.stopPropagation();
      });
    $(".dropdown-menu").mouseleave(function (event) {
        $(this).hide();
    });
   }
 }

首先，我已将.toggleClass更改为.addClass，如果我.removeClass .mouseleave dropdown，.mouseleave会保持.dropdown-menu行为并不会保持子菜单保持不变。所以，我已经在（子菜单）DropDown.prototype = { initEvents: function () { var obj = this; $(".dropdown").mouseenter(function (event) { $(this).addClass("dropdown-active"); event.stopPropagation(); }); $(".dropdown-menu").mouseleave(function () { $(".dropdown").removeClass("dropdown-active"); }); } }上听了.mouseenter事件，并在鼠标离开时隐藏了。

编辑＃3 ：好的，最后一个成功的版本就是这样，

.dropdown-active

因此，我们听取了.mouseleave事件并添加了一个{{1}}类，并在{{1}}时删除了该类。 FIDDLE：http://jsfiddle.net/xibalbian/U8nVH/1/

Answer 3

将此鼠标悬停处理程序添加到init事件函数中。

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

Answer 4

你可以这样做;

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

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

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

        obj.dd.hover ( function (event) {
            if (event.type == "mouseenter") {
                $(this).addClass('dropdown-active');
            }
            else { // mouseleave
                 $(this).removeClass('dropdown-active');
            }
        });
    }
}

$(function () {
    var dd = new DropDown($('.dropdown'));


});

jsfiddle link

Answer 5

替换＆＃34;点击＆＃34;到＆＃34; hover＆＃34;这里： //点击时切换.dropdown-active obj.dd.on（＆＃39; hover＆＃39;，功能（事件）

您的代码绝对正常且工作正常。

获取jQuery下拉列表以在悬停时显示

5 个答案: