javascript - 单击淡出 ul 的 anchor 标记上的事件？

Question

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

代码在这里:http://jsfiddle.net/kyllle/W8AL5/

---

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

您的代码实际上并不遥远。只是几个问题:

1. $('this') 不起作用。你需要 $(this)。 this 关键字指向被点击的元素。
2. .find('ul.countries') -- find适用于后代元素。您想要的 ul 是父元素。你想要的方法是closest
3. 如果您希望用户停留在同一页面上而不是点击链接，您应该使用 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