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」のランディングページです。「About」や「contactus」などの他のメインアイテムにカーソルを合わせると、それらのサブアイテムが現在のアイテムの上に重なって表示されます。

私が欲しいのは、他の「選択されていない」クラスのアイテムにカーソルを合わせると、それらのサブアイテムが表示され、現在の「選択された」アイテムが消えることです。ここでどのように機能するか：http：//jsfiddle.net/williamdickson/2n4hR/

ありがとうございました

4

1 に答える 1

1

.selected すでに jQuery を使用しているため、.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 に答える