jquery - 如何使子导航消失而其他子导航在悬停时显示

Question

我设置了这个主导航:

<ul class="menu12">
<li><a href="/">Home</a></li>
<li><a href="/">About</a>
    <ul>
        <li><a href="/">History</a></li>
        <li><a href="/">Team</a></li>
        <li><a href="/">Offices</a></li>
    </ul>
</li>
<li><a href="/">Services</a>
    <ul>
        <li><a href="/">Web Design</a></li>
        <li><a href="/">Internet</a></li>
        <li><a href="/">testing &gt;</a>
            <ul>
                <li><a href="/">test 1</a></li>
                <li class="selected"><a href="/">test 2</a></li>
                <li><a href="/">test 3</a></li>
                <li><a href="/">testing &gt;</a>
                    <ul>
                        <li><a href="/">test 1</a></li>
                        <li><a href="/">test 2</a></li>
                        <li><a href="/">test 3</a></li>
                        <li><a href="/">test 4</a></li>
                        <li><a href="/">test 5</a></li>
                    </ul>
                </li>
                <li><a href="/">test 4</a></li>
                <li><a href="/">test 5</a></li>
            </ul>
        </li>
        <li><a href="/">Hosting</a></li>
        <li><a href="/">Domain Names</a></li>
        <li><a href="/">Broadband</a></li>
    </ul>
</li>
<li><a href="/">Contact Us</a>
    <ul>
        <li><a href="/">U K</a></li>
        <li><a href="/">France</a></li>
        <li><a href="/">USA</a></li>
        <li><a href="/">Australia</a></li>
    </ul>
</li>
 </ul>

http://jsfiddle.net/williamdickson/GK8eS/

因此，对于该示例，是元素“测试 2”的着陆页。当您将鼠标悬停在任何其他主要元素(如“关于”或“联系我们”)时，它们的子元素将覆盖在当前元素之上。

我想要的是，当您将鼠标悬停在其他“未选择”类元素上时，它们的子元素会出现，而当前“已选择”元素将消失。就像它在这里的工作方式一样:http://jsfiddle.net/williamdickson/2n4hR/

谢谢

Answer 1

因为您已经在使用 jQuery，所以您需要做的就是删除 .hover() 事件中所有出现的 .selected。将您的 jquery 代码更改为第一个 fiddle :

$(document).ready(function() {
    $('li').hover(function() {
        $('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
    });
    $('li.selected').parents('li').addClass("selected");
});
​

请注意，虽然这可以满足您的要求，但是一旦您将鼠标悬停在某处，它就会移除当前所选页面的初始红色高光。我建议使用不同的类来更改文本颜色。