0

我设置了这个主导航：

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

谢谢

4

1 回答 1

1

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

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

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

于 2012-12-29T02:47:20.910 回答