Активировать JQuery меню при наведении или нажмите - PullRequest
Новая
       37

Активировать JQuery меню при наведении или нажмите

0 голосов
/ 20 мая 2011

Моя цель - анимировать меню JQuery, чтобы оно реагировало при наведении или нажатии. Используя плагин HoverIntent, следующий код работает так, как задумано. Но как добавить событие щелчка при сохранении удобного для пользователя меню? Планируя, как написать это, я рассмотрел добавление задержки к событию при наведении курсора на элемент меню, но я не уверен, насколько практичной будет эта реализация. Как добавить событие click к следующему коду? 

<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>

Извините за форматирование кода, и спасибо за вашу помощь.

1 Ответ

1 голос
/ 20 мая 2011

Я никогда не использовал 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
  });
}

Итак, вы щелкнули ссылку, она будет складываться до тех пор, пока вы не наведите курсор мыши, а затем, когда вы снова наведете на нее курсор или щелкнете по ней, она снова будет складываться.

Edit: Вам также нужно отменить привязку щелчка по функции из hoverIntent, иначе это приведет к странному эффекту при нажатии на ссылку.

...