0

私の目標は、ホバーまたはクリックしたときに応答するように JQuery メニューをアニメーション化することです。HoverIntent プラグインを使用すると、次のコードは意図したとおりに機能します。しかし、ユーザーフレンドリーなメニューを維持しながらクリックイベントを追加するにはどうすればよいでしょうか? これを記述する方法を計画している間、メニュー項目がクリックされたときにホバー イベントに遅延を追加することを検討しましたが、その実装がどれほど実用的かはわかりません。次のコードにクリック イベントを追加するにはどうすればよいですか?

<script type="text/javascript">
$(document).ready(function() {

function show() {
 var menu = $(this);
 menu.children(".options").slideDown();
}

function hide() { 
 var menu = $(this);
 menu.children(".options").slideUp();
}

$(".menuHeader").hoverIntent({
 sensitivity: 3, 
 interval: 50,   
 over: show,     
 timeout: 300,  
 out: hide       
  });

});


<div id="SideMenu">
  <div id="aMenu" class="menuHeader">
   <h2>Menu A</h2>
    <ul class="options" >
      <li><a href="">Option a1</a></li>
      <li><a href="">Option a2</a></li>
      <li><a href="">Option a3</a></li>
    </ul>
  </div>
  <div id="bMenu" class="menuHeader">
   <h2>Menu B</h2>
    <ul class="options" >
      <li><a href="">Option b1</a></li>
      <li><a href="">Option b2</a></li>
      <li><a href="">Option b3</a></li>
    </ul>
  </div>
  <div id="cMenu" class="menuHeader">
    <h2>Menu C</h2>
     <ul class="options" >
      <li><a href="">Option c1</a></li>
      <li><a href="">Option c2</a></li>
      <li><a href="">Option c3</a></li>
     </ul> 
  </div>
</div>

コードのフォーマットについては申し訳ありませんが、ご協力いただきありがとうございます。

4

1 に答える 1

1

hoverIntent を使用したことはありませんが、バインドを解除する方法はありますか?

ある場合は、次のようなことができます。

$(",menuHeader").bind("click.show_menu", function() {
  show();
  //unbind over from hoverIntent
})

function hide() { 
  var menu = $(this);
  menu.children(".options").slideUp(function() {
    //rebind over from hoverIntent on callback from slideUp
  });
}

リンクをクリックすると、マウスアウトするまでスタックし、再度ホバーするかクリックすると、再びスタックします。

編集: また、 hoverIntent からオーバークリックのバインドを解除する必要があります。そうしないと、リンクをクリックしたときに奇妙な効果が発生します。

于 2011-05-20T17:51:25.427 に答える