javascript - 与 .click() 和 .hover() 结合切换的 jquery 问题

Question

当我将 .click() 和 .hover() 与切换结合使用时遇到问题。

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

这是我的代码(jsfiddle)

HTML

<ul>
<li><span>Click Me</span>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
    </ul>
</li>
</ul>

JS

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

CSS

ul{
    margin: 0;
    padding: 0;
    border: 1px solid black;
    position: relative;
}

li{
    list-style-type: none;
}

ul ul{
    display: none;
    position: absolute;
    width: 100%;
    left: -1px;
}

span{
    display: block;
    padding: 5px;
    background-color: #eeeeee;
}

a{
    background-color: #eee;
    display: block;
    padding: 5px;
}

a:hover{
    background-color: white;
}

我知道问题出在哪里，但我不知道如何解决。我希望有人有解决方案。

Answer 1

你必须为鼠标进出编写两个悬停函数，而不是像下面那样使用 toggle :

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

Demo