Question

我正在开发一个网站，其中主导航中的某些链接具有单独的子菜单 - 没什么不寻常的。

但是，我试图控制子菜单的可见性。当光标悬停在具有子菜单的链接上时，子菜单应该滑动。如果光标移动并悬停在与另一个子菜单不同的链接上，则应该发生相同的效果，但我试图在向下滑动新请求的子菜单之前隐藏任何打开的子菜单。

我使用以下代码：

jQuery(document).ready(
    function(){
        jQuery('div#block-system-main-menu div.content ul li.leaf').mouseover(
            function(){
                //jQuery('div.view-referenced-product-categories').slideUp();
                jQuery(this).find('div.view h3').slideDown();
            }
        );
    }
);

使用该代码，我的滑动工作正常但我最终打开了多个子菜单。如果我取消注释鼠标悬停功能中的第一行代码，我的滑动效果不起作用。

为了说明，该网站位于http://hoffmann-koree.com/。带有子菜单的2个链接是浴室和固定。

任何人都可以告诉我我做错了什么或者更好的技术吗？

Answer 1

尝试将slideDown()放入slideUp()

的回调中

var menu = this;
jQuery('div.view-referenced-product-categories').slideUp(500, function (){
    jQuery(menu).find('div.view h3').slideDown();
});

这样，只有在slideDown()完成时才会调用slideUp()。（我把速度提高了500毫秒，因为它是默认值，但如果你加快速度来隐藏菜单，它可能会更好）

Answer 2

为什么不使用mouseleave？

jQuery('div#block-system-main-menu div.content ul li.leaf').mouseover(
    function(){
        jQuery(this).find('div.view h3').slideDown();
    }
);
jQuery('div#block-system-main-menu div.content ul li.leaf').mouseleave(
    function(){
        jQuery(this).find('div.view h3').slideUp();
    }
);

我检查了您的源代码，如果您想要添加它，只需编辑您的hoffmannkoree.js并用上面的代码段替换第4-16行。

jQuery子导航交替可见性

2 个答案: