javascript - 为下拉菜单实现 hoverIntent（来自 click_event）

Question

该帖子已从该主题中删除

Answer 1

只需尝试在悬停时使用延迟。

 $('#user_settings_dropdown').dealy(1000).animate({height:['toggle', 'swing']
        }, 225);

Answer 2

在这种情况下，我发现最好的选择是将菜单触发器和菜单主体封装在一个包装器中，然后对其应用 hoverIntent。当您的菜单被隐藏时，包装器是触发元素的大小。显示菜单时，包装也将包括所有可见菜单，允许用户单击菜单中的任何位置。

这是一个基于您的代码的精简示例：http: //jsfiddle.net/irobinson/HeDSR/2/

html

<div id="menu-wrap">
<a href="#" class="user_profile_btn" title="Your profile page">
    <div class="arrow_down">Down arrow</div>
</a>
<ul id="user_settings_dropdown">
    <li><a href="#"><div>View profile</div></a></li>
      <div class="grey_line"></div>
      <li class="settings_list_item">Item a</li>
      <li class="settings_list_item">Item b</li>
      <li class="settings_list_item">Item c</li>
    </ul>
  </li>
</div>​

javascript

$('#menu-wrap').hoverIntent(function () {
    $('#user_settings_dropdown').show();
},
function () {
    $('#user_settings_dropdown').hide();
});​

css

#user_settings_dropdown{display:none;}
#menu-wrap{width:100px;}​

Answer 3

该帖子已从该主题中删除