проблемы с мышью jQuery

Question

Я пытаюсь создать меню с такой структурой:

<ul id="primary" class="menuOptions">
     <li>Item 1</li>
     <li>Item 2
         <div id="secondary">
            <ul class="menuOptions">
               <li>subItemOne</li>
               <li>subItemTwo</li>
           </ul>
         </div>
     </li>
     <li>Item 3</li>
</ul>

Я оживляю его с помощью этого сценария:

$j('.menuOptions li').each(function(i){
//applies to all menu options
    $j(this)
   .bind('mouseover',function() {
          $j(this).toggleClass("over");
       })
       .bind('mouseleave',function() {
          $j(this).toggleClass("over");
       });                  
  });

Я обнаружил, что функция toggleClass вызывается в основном элементе меню, когда мышь перемещается над дополнительными элементами меню. Я знаю, что мышиный отпуск не должен вызываться до тех пор, пока мышь не выключится, поэтому я растерялся.

Нужно ли как-то активно останавливать распространение событий?

Спасибо!

Тим

Answer 1

Можете ли вы попробовать просто с помощью функции наведения.

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);

Answer 2

Я подозреваю, что проблема заключалась в том, что вы соединяли мышь над с мышью оставьте .

См. http://api.jquery.com/category/events/mouse-events/

В общем, вы хотите, чтобы муфты были:

• мышь введите с помощью мышь оставьте
• мышь более с мышь out .

Использование других комбинаций может привести к нежелательному поведению. mouse over и mouse out - более старые события, которые, хотя иногда и полезны, обычно уступают mouse введите и мышь оставьте .

Вы также можете попробовать просто вещи, используя hover , в точности соответствует использованию мыши , введите и мыши , оставьте .