单击淡出 UL 的锚标记上的事件

click event on anchor tag that fades out ul?

本文关键字：事件 淡出 UL 单击      更新时间：2023-09-26

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

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

爪哇语

$(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);
    });
});

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

  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);
    });
});

js小提琴

在这里找到不是您情况的正确选择。 它只搜索jQuery元素的后代，在这种情况下，"this"将永远是你尝试获取的ul的子级。 查看有关查找的更多信息

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

： 
$('ul.countries').fadeToggle(200);
$('ul.countries').fadeOut(200);
相关文章：