Javascript 将toggle与.click（）和.hover（）结合使用时出现的jquery问题

将.click（）和.hover（）与toggle组合使用时出现问题

我有一个“菜单”，应该在悬停时打开/关闭，但也可以在单击时关闭/重新打开。但是，如果我用鼠标悬停打开菜单，然后用鼠标单击关闭它，如果我停止鼠标悬停，它会再次打开

这是我的代码（）

HTML

CSS

---

我知道问题是什么，但我不知道如何解决它。我希望有人能找到解决方案。

您必须为鼠标输入和输出编写两个悬停函数，而不是像下面这样使用

切换功能：

$(function() {
        $("ul").hover(function() {
            $(this).find('ul').show();
        },function() {
            $(this).find('ul').hide();
        });
        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

您必须为鼠标输入和输出编写两个悬停函数，而不是像下面那样使用
切换功能：

$(function() {
        $("ul").hover(function() {
            $(this).find('ul').show();
        },function() {
            $(this).find('ul').hide();
        });
        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

使用第一个悬停构造函数：

$("ul").hover( handlerIn, handlerOut )

…而不是对两个操作具有相同功能的第二个操作：

.hover( handlerInOut )

问候；）
 使用第一个悬停构造函数：

$("ul").hover( handlerIn, handlerOut )

…而不是对两个操作具有相同功能的第二个操作：

.hover( handlerInOut )

问候；）

在悬停函数中也添加mouseout函数

演示：


在悬停函数中也添加mouseout函数

演示：

您可以在的回调函数中单独使用和，而不是创建问题，如下所示：

$(function () {
     $("ul").hover(function () {
            $(this).find('ul').slideDown();
     },
     function () {
            $(this).find('ul').slideUp();
     });

     $("ul").click(function () {
            $(this).find('ul').toggle();
     });
});

您可以在的回调函数中单独使用和，而不是创建问题，如下所示：

$(function () {
     $("ul").hover(function () {
            $(this).find('ul').slideDown();
     },
     function () {
            $(this).find('ul').slideUp();
     });

     $("ul").click(function () {
            $(this).find('ul').toggle();
     });
});

如果您觉得mouseenter（）和mouseleave（）更容易阅读，您也可能更喜欢使用

    $(function() {
        $("ul")
        .mouseenter(function() {
            $(this).find('ul').show();
        })
        .mouseleave(function() { 
           $(this).find('ul').hide(); 
        });

        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

如果您觉得读起来更容易，您也可能更喜欢使用mouseenter（）和mouseleave（）

    $(function() {
        $("ul")
        .mouseenter(function() {
            $(this).find('ul').show();
        })
        .mouseleave(function() { 
           $(this).find('ul').hide(); 
        });

        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

好的，很好用！谢谢：）你知道我如何改变平板电脑的行为吗？因为悬停效应，我需要“双击”。你的意思是你想使用双击而不是单击？是的，我不喜欢平板电脑用户必须单击两次。好的，这很好！谢谢：）你知道我如何改变平板电脑的行为吗？因为悬停效应，我需要“双击”。你是说你想用双击而不是单击？是的，我不喜欢平板电脑用户必须单击两次。