0

我正在尝试在 Magento 的导航栏上创建一个下拉菜单。正如您将在我的代码中看到的，当我将鼠标悬停在其中一个列表项上时，所有下拉菜单都会折叠。但是我不知道如何在不为每个 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 回答