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

【问题标题】：How to make the sub nav disappear while other sub nav show up while hover如何使子导航消失而其他子导航在悬停时显示
【发布时间】：2012-12-29 02:16:36
【问题描述】：

我设置了这个主导航：

<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/

谢谢

【问题讨论】：

有没有可以提供给我们工作行为的例子？我很难理解你
嗨@Kristian，到目前为止我在网上找不到理想的例子。我在 jsfiddle 上所做的那个：jsfiddle.net/williamdickson/GK8eS 是我所追求的，但不是 100%。我现在将添加更多内容。
@Simpledog 如果您有一个工作示例，有什么问题？工作示例没有按照您的意愿执行吗？
@kennypu 它并没有完全按照我想要的方式工作。 jsfiddle.net/williamdickson/GK8eS: 悬停时其他项目被覆盖jsfiddle.net/williamdickson/2n4hR: 'selected' 类项目在登陆页面时不显示。

标签： jquery css menu

【解决方案1】：

由于您已经在使用 jQuery，您需要做的就是在 .hover() 事件中删除所有出现的 .selected。将您的 jquery 代码更改为第一个小提琴：

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

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

【讨论】：

谢谢！现在我知道我哪里出错了......是的，感谢您指出“副作用”，我可能会使用 onclick 而不是悬停来避免这个问题。再次感谢。