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

此帖已从此主题

中删除

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

3 个答案: