为下拉菜单实现悬停意图(来自click_event)

Question

我有一个最初由click_event激活的下拉菜单，但是我现在想实现hoverIntent以使菜单下降。

我现在遇到的问题是能够使用菜单，因为每当我现在调用菜单时，一旦我离开激活菜单的区域，菜单就会关闭。

JavaScript：

    function setupUserConfigMenu() {
        $('.user_profile_btn').hoverIntent(
            function (event) {
                $('#user_settings_dropdown').animate({height:['toggle', 'swing']
            }, 225);
            },
            function (event) {
                $('#user_settings_dropdown').animate({height:['toggle', 'swing']
            }, 225);
            })
    }

.HTML：

    <li>
        <a href="<%= "#" %>" class="user_profile_btn" title="Your profile page"><%= truncate(current_user.full_name || current_user.name, :length => 28) %>
          <div class="arrow_down"></div></a>
        <ul id="user_settings_dropdown">
          <li>
            <a href="<%= current_user.get_url(true) %>">
              <%= image_tag current_user.get_thumb_url, :size => "30x30" %>
              <div>
                <%= truncate(current_user.full_name || current_user.name, :length => 40) %>
                <br>
                View profile
              </div>
            </a>
          </li>
          <div class="grey_line"></div>
          <li class="settings_list_item">
            <%= link_to "Settings", edit_user_registration_path %>
          </li>
          <li class="settings_list_item">
            <%= link_to "About", "/about" %>
          </li>
          <li class="settings_list_item">
            <%= link_to "Logout", destroy_user_session_path, :method => :delete %>
          </li>
        </ul>
      </li>

Answer 1

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

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

Answer 2

在这种情况下，

我发现最好的选择是将菜单触发器和菜单主体包含在包装器中，并对其应用悬停意图。当菜单处于隐藏状态时，包装器的大小为触发器元素的大小。显示菜单时，换行也将包括所有可见菜单，允许用户单击菜单中的任意位置。

下面是一个基于你的代码的精简示例：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

我设法通过实现setTimeout（）和clearTimeout（）来让它工作。代码如下：

JavaScript：

    $('.user_profile_btn').hoverIntent(
        function () {
            $('#user_settings_dropdown').delay(150).animate({height:['toggle', 'swing']
            }, 225);
        },
        function () {
    })
    var settings_dropdown_timer;
    $('#user_settings_dropdown').mouseout( function () {
        settings_dropdown_timer=setTimeout( function (){
            $('#user_settings_dropdown').hide();
        },2000)
    });
    $('#user_settings_dropdown').mouseover( function (){
        clearTimeout(settings_dropdown_timer);
    });

    $('#user_settings_dropdown').bind("clickoutside", function () {
        $('#user_settings_dropdown').hide();
    });