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/

因此，该示例是项目＆＃39;测试2＆＃39;的目标网页。当您将任何其他主要项目悬停在＆＃39;关于＆＃39;或“联系我们”时，他们的子项目将覆盖在当前项目之上。

我想要的是当你将鼠标悬停在其他未选择的＆＃39;课程项目，他们的子项目显示和当前选择的＆＃39;项目将消失。就像它在这里的工作方式一样：http://jsfiddle.net/williamdickson/2n4hR/

谢谢

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

请注意，虽然这可以按照您的要求进行操作，但只要将鼠标悬停在某些内容上，它就会删除当前所选页面的初始红色高光。我建议使用不同的类来改变文本颜色。

当悬停时其他子导航显示时如何使子导航消失

1 个答案: