Javascript 让jQuery下拉列表在悬停时显示

我有一个jQuery，我没有写过，我正在使用它在我的网站上打开下拉菜单。该代码工作得很好，但不幸的是下拉菜单只显示在点击，我希望它的选项也显示在悬停。有什么简单的方法可以用我现有的代码来实现这一点吗

下面是一个活生生的例子：

HTML

<div class="dropdown">
    Dropdown

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

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

试试这个：

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

试试这个：

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

以下是JSFIDLE：

我使用了

.hover（函数（事件）{…}

，这样我就可以监听类下拉列表中的事件了，然后我切换了下拉列表活动

编辑#1：请参见此处的新小提琴

首先，我将

.toggleClass

更改为

.addClass

，如果我说

.removeClass

的话，当

.mouseleave

在

下拉菜单上时，它将保持相同的行为，并且不会使子菜单保持静止。因此，我听了（子菜单）上的
.mouseleave
事件
。下拉菜单
并在鼠标离开时隐藏

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

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
事件，添加了一个
.dropdown active
类，并在
.mouseleave
时删除了该类。
小提琴：
这是JSFIDLE：

我使用了
.hover（函数（事件）{…}
，这样我就可以监听类下拉列表中的事件了，然后我切换了下拉列表活动

编辑#1：请参见此处的新小提琴

首先，我将
.toggleClass
更改为
.addClass
，如果我说
.removeClass
的话，当
.mouseleave
在
下拉菜单上时，它将保持相同的行为，并且不会使子菜单保持静止。因此，我听了（子菜单）上的
.mouseleave
事件
。下拉菜单
并在鼠标离开时隐藏

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

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
事件，添加了一个
.dropdown active
类，并在
.mouseleave
时删除了该类。
FIDDLE:
将此鼠标悬停处理程序添加到init事件函数中

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

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

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

你可以这样做

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'));


});

jshiddle
你可以随心所欲

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'));


});

jshiddle
在此处将“单击”替换为“悬停”：
//切换。单击可激活下拉列表
obj.dd.on（“悬停”，功能（事件）

您的代码非常好，工作正常。
将“单击”替换为“悬停”：
//切换。单击可激活下拉列表
obj.dd.on（“悬停”，功能（事件）

您的代码非常好，工作正常。
只使用“mouseenter”就有点怪。将“mouseenter”更改为“mouseenter mouseleave”，当您的鼠标不再位于下拉列表的顶部时，让它关闭下拉列表。是的，这非常非常接近。因此，当我将鼠标悬停在“下拉列表”上时，下拉列表工作得非常好文本，但只有当我将鼠标悬停在“下拉菜单”上时，菜单才会消失再次发送文本。如果我只将鼠标悬停在下拉菜单之外的任何菜单上，你能让菜单消失吗？它只使用“mouseenter”有点奇怪。将“mouseenter”更改为“mouseenter mouseleave”，当你的鼠标不再位于下拉菜单的顶部时，让它关闭下拉菜单。是的，这非常非常接近。因此，当我将鼠标悬停在“下拉”文本上，但只有当我再次将鼠标悬停在“下拉”文本上时，菜单才会消失。如果我只将鼠标悬停在除下拉菜单以外的任何内容上，您是否可以使菜单消失？这非常有效，但每当我将鼠标悬停在“下拉”文本上时文本如果不隐藏，我就无法向下移动到下拉菜单。这会使显示/隐藏下拉菜单有点奇怪，是否有办法解决这个问题？在这里，检查一下，我也在编辑答案。它工作得很好，但当我将鼠标从
类中移开时，下拉菜单会隐藏，当我将鼠标悬停在Dro上时，它不会显示出来pdown再次发短信。另外，非常感谢你在这方面与我合作，我真的很感谢你花时间来帮助我：）不客气！我想我解决了它，很抱歉它花费了比我预期的更多的时间。在这里，看看这个，我想最容易实现的方法就是这个。这非常有效，但每当我在“下拉”上悬停时文本如果不隐藏，我就无法向下移动到下拉菜单。这会使显示/隐藏下拉菜单有点奇怪，是否有办法解决这个问题？在这里，检查一下，我也在编辑答案。它工作得很好，但当我将鼠标从
类中移开时，下拉菜单会隐藏，当我将鼠标悬停在Dro上时，它不会显示出来pdown再次发短信。同时，非常感谢你在这方面与我合作，我真的很感谢你花时间来帮助我：）不客气！我想我解决了它，很抱歉它比我预期的要花更多的时间。这里，看看这个，我想最简单的方法就是这个。