0

問題：

親アイテムにカーソルを合わせると最初のアイテムが表示されるメニューがあります。たとえば、「Kayaks & Canoes」にカーソルを合わせると、最初の項目 2+ Personが強調表示され、右側にコンテンツが表示されます。

また、ボートにカーソルを合わせると、右側のコンテンツが変化するはずです。デフォルトではレクリエーションが選択されているはずですが、釣りにもホバリングできるはずです。

現在、最初のアイテムは表示されませんが、任意のアイテムにカーソルを合わせると表示されます。

私は何を試しましたか？

$(document).ready(function() {
    //on hover of sub menu li then highlight itself
    $('div#new-menu-lower ul.menuul li.menuli').hover(

    function() {

        $(this).children('div#new-menu-lower ul li ul').css("display","block");
        $('div#new-menu-lower ul li ul li ul:first').css("display","block");
        $('div#new-menu-lower ul li ul li').css("display","block");
        $('div#new-menu-lower ul li ul li ul li:first').css("display","block");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","block");

    }, function() {

        $(this).children('div#new-menu-lower ul li ul').css("display","none");
        $('div#new-menu-lower ul li ul li ul:first').css("display","none");
        $('div#new-menu-lower ul li ul li:first').css("display","none");
        $('div#new-menu-lower ul li ul li ul li:first').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","none");

    })
});

JSFIDDLE: http://jsfiddle.net/NDMuu/7/

疑似クラス:hoverIF を使用して純粋な CSS ソリューションを受け入れます。それを機能させることができます。それ以外の場合は、Jquery/JS が適していると思いますか?

*編集： *私の説明を少し更新しました

4

1 に答える 1

1

デフォルトで表示する最初の項目を取得する方法は、ifそれを宣言するステートメントを使用することです: 親リスト項目がそうであれば、display: blockそれもそれになります。別のアイテムにカーソルを合わせると、他のアイテムにdisplay: none. すべてのコードを修正する時間はありませんが、ここから始めましょう。それを試してみてください。その後、仕上げるお手伝いをします。

于 2012-06-29T21:57:35.480 に答える