Question

我希望垂直菜单的子菜单在鼠标悬停时展开和折叠。这就是我到目前为止所做的事情，但如果你快速做到这一点会很疯狂，因为所有动画都会立刻运行并延迟。我怎样才能确保一次扩展一个菜单。

我还将current_page_item设置为打开但默认情况下我不希望它扩展或collaspe。

<ul>
 <li class="current_page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a></li>
 <li class="page_item"><a href="#">Parent Item</a></li>
</ul>

jQuery('ul.children').hide();
jQuery('li.current_page_item ul.children').show();
jQuery('li.current_page_item').parent().show();

jQuery("li.page_item").hover(function() { 
  jQuery(this).find('ul.children').delay(300).slideDown('slow');
    }, function() {  
  jQuery(this).find('ul.children').delay(300).slideUp('slow');
});

Answer 1

我们使用JQuery hoverintent插件来解决这个问题。它可以很好地解决这个问题。

http://cherne.net/brian/resources/jquery.hoverIntent.html

网站上的示例：

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config );

HTH。

Answer 2

用hoverindent

计算出来

// Accordion menus
var menudown = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: showSub, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: hideSub // function = onMouseOut callback (REQUIRED)
};

function showSub(){
    jQuery(this).addClass('down').removeClass('up').children("ul.children").slideDown(500);
}

function hideSub(){
    jQuery(this).addClass('up').removeClass('down').children("ul.children").slideUp(700);
}

jQuery('li').not('.current_page_item, .current_page_ancestor').has('ul').hoverIntent( menudown );

jQuery幻灯片打开和关闭菜单。如何阻止他们发疯？

2 个答案: