Question

我正在尝试根据链接是否悬停来切换列表。

这是我的jQuery

$(function(){
    $('.lists li').hover(function(){
        $('ul.list-display', this).toggle('slow');
    });
});

这是我的HTML：

<ul class='lists'>
    <li><a href='http://eloquentjavascript.net/2nd_edition/preview/01_values.html'>Values, Types, and Operators</a>
    </li>
    <li><a href='http://eloquentjavascript.net/2nd_edition/preview/02_program_structure.html'>Program Structure</a>

        <ul class='list-display'>
            <h6>Test Sections</h6>

            <li>Test</li>
            <li>Test</li>
        </ul>
    </li>
</ul>

问题是，只要您将鼠标悬停在跨越页面相当远的li上，它就会切换，因此每当您将鼠标悬停在li时，它都会触发切换功能。理想情况下，当鼠标悬停在ul的链接上时，我希望悬停触发，而不是li的整个区域。

我想我必须在我的功能中改变我的第一个选择器，但到目前为止我的所有尝试都失败了。

Answer 1

我看到您使用this为ul提供了一个上下文，但这就是为什么当您更改它以触发{{1}时它不起作用的原因}}。相反，只需像这样遍历DOM：

Answer 2

$(function(){
    $('.lists li a').hover(function(){
        $('ul.list-display').toggle('slow');
    }
);

});

这似乎有效 http://jsfiddle.net/z6LP5/

Answer 3

这是因为您的代码适用于列表项。不是超链接。

$(function(){
    $('.lists li a').hover(function() { // reach the hyperlink
        $('ul.list-display').toggle('slow');
    }
);

现在，当您将鼠标悬停在超链接（a）上时会执行此操作。然后它将使用list-display的className切换无序列表。

无法找到合适的选择器

3 个答案: