Question

我正在尝试创建一个链接，当悬停在无序列表中淡出时，当您单击无序列表中的列表项时，ul应该淡出。目前我无法弄清楚如何做到这一点。如果有人能向我解释我哪里出错了，或者有任何有用的提示，告诉我如何让我的代码变得更好，那就更好了。

的Javascript

$(document).ready(function() {
    $('#container li.hover').hover(function() {
        $(this).find('ul.countries').fadeToggle(200);
    });

    $('ul.countries a').click(function() {
        $('this').find('ul.countries').fadeOut(200);
    });
});

Answer 1

你的代码实际上并不那么遥远。只是几个问题：

$('this')不起作用。您需要$(this)。 this关键字指向已点击的元素。
.find('ul.countries') - find适用于后代元素。您想要的ul是父元素。您想要的方法是closest
如果您希望用户停留在同一页面而不是关注链接，则应使用event.preventDefault。

所以，总的来说：

$(document).ready(function() {
    $('#container li.hover').hover(function() {
        $(this).find('ul.countries').fadeToggle(200);
    });

    $('ul.countries a').click(function(e) {
        e.preventDefault();
        $(this).closest('ul.countries').fadeOut(200);
    });
});

jsFiddle

Answer 2

在这里你的情况找不到正确的选择。它只搜索jQuery元素的后代，在这种情况下，“this”将始终是你想要获得的ul的子元素。 see more on find

如果您愿意，可以直接查询ul：

$('ul.countries').fadeToggle(200);
$('ul.countries').fadeOut(200);

在锚标记上点击事件淡出ul？

2 个答案: