Question

当我将.click（）和.hover（）与切换结合使用时，我遇到了问题。

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

这是我的代码（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

Answer 2

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

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

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

.hover( handlerInOut )

问候;）

Answer 3

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

在悬停功能中也添加鼠标输出功能。

演示：

http://jsfiddle.net/6jzdgcap/

Answer 4

如果您觉得这更容易阅读，您可能也更喜欢使用mouseenter（http://api.jquery.com/mouseenter/）和mouseleave（http://api.jquery.com/mouseleave/）。

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

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

Answer 5

您可以在toggle()的回调函数中单独使用slideUp()和slideDown()，而不是hover，而不是Demo，如下所示：

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

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

与.click（）和.hover（）组合切换的jquery问题

5 个答案: