0

Magento のナビゲーション バーにドロップダウン メニューを作成しようとしています。私のコードでわかるように、リスト項目の 1 つにカーソルを合わせると、すべてのドロップダウン メニューが折りたたまれます。しかし、各liのホバー機能を作成せずに正しいものだけを表示する方法がわかりません。これは、目標を達成するための非効果的な方法のようです。

だから私はあなたたちが私を助けてくれることを望んでいました:)

これは私がこれまでに持っているものです:

HTML:

<div class="navigation-bar">
<ul class="mainLevel">
    <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/new-in.html" class="level-top"><span>New in</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken.html" class="level-top"><span>Merken</span></a>
        <ul class="level0">
            <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/merken/diesel.html"><span>Diesel</span></a></li>
            <li class="listSeperator"></li>
            <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken/becksondergaard.html"><span>Becksondergaard</span></a></li>
            <li class="listSeperator"></li>
        </ul>
    </li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory3"><a href="http://fabriqmagento.development.cream.nl/categorie.html" class="level-top"><span>Categorie</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory4"><a href="http://fabriqmagento.development.cream.nl/tassen.html" class="level-top"><span>Tassen</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory5"><a href="http://fabriqmagento.development.cream.nl/accessoires.html" class="level-top"><span>Accessoires</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory6"><a href="http://fabriqmagento.development.cream.nl/jeans.html" class="level-top"><span>Jeans</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory7"><a href="http://fabriqmagento.development.cream.nl/outlet.html" class="level-top"><span>Outlet</span></a></li>
    <li class="listSeperator">|</li>
</ul>
</div>

CSS:

ul.level0{ display:none;}

jQuery:

(function(window, $, undefined) {

    jQuery(function(){
        $('li.navLink').hover(function(){
            $('ul.level0').show();
        }, function(){
            $('ul.level0').hide();
        })
    });

})(window, jQuery);
4

1 に答える 1

1

スクリプトにいくつかの変更が必要だっただけです...

http://jsfiddle.net/8846T/

(function($) {

    jQuery(function(){
        $('li.navLink').hover(function(){
            $('ul.level0').hide();
            $(this).find('ul.level0').show();
        }, function(){
            $('ul.level0').hide();
        })
    });

})(jQuery);

ホバー時にすべての level0 ul 要素を非表示にしてから、ホバーした li の子 level0 ul 要素を表示するようにしました。

また、必要のない関数呼び出しから少しのコードを削除しました:)

于 2012-10-10T11:58:34.503 に答える