Question

所以我正在使用wordpress创建一个网站：http://www.baxtersresume.com/wordpress-3.9.1/wordpress/about/

我正在玩菜单jquery以获得正确的效果，我想我差不多了，但我需要一些帮助。如果您查看该网站，当您通过鼠标悬停打开底部子菜单时会注意到，然后从底部重新进入菜单，指针将关闭。这就是我想要避免的。到目前为止这是脚本：

jQuery(document).ready(function(){
jQuery(".page_item ul, .sub-menu").hide();
var current; 
var currentsub;

jQuery(".page_item ul, .sub-menu").prev().mouseenter( function() {
current = jQuery(this);
currentsub = jQuery(this).next(); 

currentsub.slideDown();
});

/*jQuery(".header__content").mouseleave( function() {
jQuery(".page_item ul, .sub-menu").slideUp();
});*/

jQuery(".menu-item-object-page, .menu-item-has-children").mouseenter( function() {
if (current != jQuery(this) && currentsub != jQuery(this)) {
currentsub.slideUp();

};

});
});

我可以在这做什么？

编辑*（解决了！JSfiddle with html） http://jsfiddle.net/tu965j0d/1/

Answer 1

也许以下内容将成为您的起点。只需使用选择器来确定想要slideUp / slideDown的那些元素，并排除mouseEnter事件目标的子元素？

$(function () {
    $('.sub-menu').hide().parent().mouseenter(function(){
        $('.sub-menu').not($(this).find('.sub-menu')).stop(true, true).slideUp();
        $(this).find('.sub-menu').slideDown();
    });
});

小提琴：http://jsfiddle.net/tu965j0d/

编辑：还有一些手风琴菜单库和教程，可能有用吗？例如，this little tutorial使用了一些不错的CSS3过渡。

WordView中的Jquery折叠菜单（轻微故障）

1 个答案: