javascript - dotimeout 无法正常工作

Question

我正在尝试使用 dotimeout 插件来延迟鼠标悬停在顶部导航上方时显示子导航的效果。当将事件类添加到第一个 li 时，插件似乎运行良好，但当添加到后续 li 时，它停止显示隐藏的 ul 在事件的 li 之上。

这是我的脚本:

$(function(){

    $('ul.main-nav').each(function(){
        var nav = $(this);

        nav
        .mouseover(function(e){
            nav.doTimeout( 'main-nav', 500, over, e.target );
        }).mouseout(function(){
            nav.doTimeout( 'main-nav', 500, out );
        });

        function over( elem ) {
            var parent = $(elem).closest( 'li.main-nav' );

            out( parent );
            parent.children( 'a' ).addClass( 'hover' );
            parent.children( 'ul:hidden' ).slideDown( 'fast' );
        };

        function out( elem ) {
            var parents = elem
                ? $(elem).closest( 'li.main-nav' ).siblings()
                : nav.children();

            if ( nav.is( '.main-nav-horizontal' ) ) {
                parents = parents.not( '.active' );
            }

            parents.children( 'a' ).removeClass( 'hover' );
            parents.children( 'ul' ).hide();
        };
    });

});

Here's my jsfiddle

我可以看到人们正在使用这个插件，所以这个问题看起来应该很容易解决，但据我所知，一切都应该正常工作。

Answer 1

将你的输出函数改成这个。

function out( elem ) {

  var parents;

  if (elem) {
    parents = $(elem).closest( 'li.main-nav' ).siblings();
  }
  else {
    parents = nav.children();
    showthisone = parents.filter( '.active' );
    parents = parents.not( '.active' );
  }

  parents.children( 'a' ).removeClass( 'hover' );
  parents.children( 'ul' ).hide();

  if (!elem) {
    showthisone.children( 'a' ).addClass('hover');
    showthisone.children( 'ul' ).show();
  }

};