单击列表项时取消下拉列表

Dismissing Drop Down List when List Item Clicked

本文关键字:取消 下拉列表 列表 单击      更新时间:2023-09-26

我有一个下拉列表,在悬停时激活(在悬停离开时取消)。就悬停而言,它工作得很好。当用户单击下拉列表中的某个列表项时,我希望下拉列表被忽略,就像他们将鼠标从列表中移开一样。这就是我陷入困境的地方。

$(document).ready(function () { 
    $('.navigation li').hover(
        function () {
            $('ul', this).fadeIn();
        }, 
        function () {
            $('ul', this).fadeOut();        
        }
    );
    // this is where I am attempting to dismiss the drop down list
    // the console output appears just fine, but the drop down list does not
    // go away.
    $('.navigation li').click(function () {
        console.log("clicked");
        $('.ul', this).fadeOut();
    });
});

值得注意的是,每次单击都会出现两次控制台输出。不确定这意味着什么。。。

您的目标是ul,而不是<ul>标记。

将最后一个代码更改为:

$('.navigation li').click(function () {
    console.log("clicked");
    $('ul', this).fadeOut(); // changed
});

通常都是简单的事情