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

Моя цель — анимировать меню 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>

Sorry about the formatting of the code, and thank you for your help.


menu click jquery hover hoverintent
person enigmaspade    schedule 20.05.2011    source источник
comment
Что вы хотите сделать кликабельным? Если это тот же заголовок меню, то хотите ли вы, чтобы на него можно было щелкнуть, чтобы переопределить тайм-аут? (Значит, пользователю не нужно ждать, когда он наведет курсор на объект?)   -  person Jasoon    schedule 20.05.2011
comment
Я не знаю, думаете ли вы добавить обработку кликов из-за мобильных устройств, но на моих веб-сайтах событие наведения позволяет мобильным пользователям касаться меню и отображать его — в коде не требуется событие клика. Просто мысль, не знаю, почему вам нужно событие щелчка.   -  person    schedule 20.05.2011
comment
Проблема была передана мне, чтобы улучшить мое понимание JQuery, я не вижу, чтобы результат когда-либо использовался. Лично, если бы мне было поручено создать удобное для пользователя меню, я бы заставил событие наведения изменить цвет текста ссылок, но не разворачивало бы меню, если бы оно не было нажато. Кажется, это более удобный подход. Тем не менее, я пытаюсь понять, как заставить это работать со следующим намерением: меню расширяется, когда пользователь зависает с задержкой в ​​​​полсекунды, мне нужно изменить код, чтобы расширяться также при нажатии. Но без какой-то паузы на эффекте наведения, я согласен с вами обоими, кажется бессмысленным.   -  person enigmaspade    schedule 20.05.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я никогда не использовал 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, иначе это вызовет странный эффект при нажатии на ссылку.

person Bernardo Mendes    schedule 20.05.2011
comment
Я посмотрю на это и опубликую свои выводы. Спасибо за предложение. - person enigmaspade; 20.05.2011
comment
Я нашел способ отвязать наведение и отключение мыши для hoverIntent. То, что вы написали выше, я считаю лучшим подходом к этой странной проблеме. Спасибо! - person enigmaspade; 20.05.2011
comment
Вот как отменить привязку hoverIntent: 8151278/ - person Yisela; 21.08.2012