javascript - ドロップダウン メニューの hoverIntent の実装 (click_event から)

Question

この投稿はこのスレッドから削除されました

Answer 1

ホバーアウトで遅延を使用してみてください。

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

Answer 2

この投稿はこのスレッドから削除されました

Answer 3

この状況で最善の策であることがわかったのは、メニュー トリガーとメニュー本体をラッパーで囲み、それに 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;}​