Question

我有一个清单：

<ul class="action">
<li>Available actions</li>
<li><a href="one.htm">One</a></li>
<li><a href="two.htm">Two</a></li>
</ul>

我想隐藏可用的操作，直到用户将鼠标悬停在它们上面：

jQuery(function($) {
    $('ul.action a').hide();
    $('ul.action').hover(function() {
        $(this).filter('a').show('slow');
    },function() {
        $(this).filter('a').hide('slow');
    });
});

我想我不明白$（这个）是什么。

Answer 1

您需要jQuery's .find()而不是the .filter() method。

在jQuery事件处理程序中，this引用与接收事件的选择器匹配的元素。

所以在这里，this指的是<ul>元素。因此，您需要.find()嵌套的<a>元素。

jQuery(function($) {
    $('ul.action a').hide();
    $('ul.action').hover(function() {
        $(this).find('a').show('slow');
    },function() {
        $(this).find('a').hide('slow');
    });
});

当您使用.filter()时，您正在检查匹配的集合（在本例中为<ul>），以查看它是否找到与您提供的过滤器匹配的任何内容（在本例中为{{1} }}）。

由于"a"永远不是<a>，因此与<ul>不匹配。

作为旁注，您可以像这样简化代码：

示例： http://jsfiddle.net/tNTAa/

.filter()

Answer 2

尝试

$(this).find('a').show('slow');

而不是

$(this).filter('a').show('slow');

（和hide相同）

您想要查找当前a的所有子ul元素。

http://api.jquery.com/filter/
http://api.jquery.com/find/

隐藏/显示可用的操作

2 个答案: