".mouseleave" не соблюдает ".not" в jQuery

Question

Я пытаюсь сделать так, чтобы при наведении элемента li фоновая позиция изменялась (что прекрасно работает), а при щелчке она оставалась во втором активном состоянии (вообще не работает). Это работает, если в HTML класс «активный» уже применен к элементу. Я пробовал почти все, о чем я мог думать, и искал в течение долгого времени, но, похоже, не могу понять это.

HTML:

<div id="navigation">
    <ul>
      <li><a href="#">Mission</a></li>
      <li class="active"><a href="school.html">School</a></li>
      <li><a href="programs.html">Programs</a></li>
      <li><a href="instructors.html">Instructors</a></li>
      <li><a href="contact.html">Contact Us</a></li>

      <li class="bumpR"><a href="store.html">Store</a></li>
      <li><a href="blog.html">Blog</a></li>
    </ul>
  </div> <!-- end navigation -->

JQuery:

   $('#navigation li').not('li.active').mouseover(function() {
          $(this).stop().animate({backgroundPosition: '0px -40px'}, 500);
         // $(this).children('a').animate({opacity: .1}, 50);
          $(this).children('a').css({ 'color': 'black'});
         // $(this).children('a').delay(300).animate({opacity: 1}, 350); 
      })
     $('#navigation li').not('li.active').mouseleave(function() {
          $(this).stop().animate({backgroundPosition: '0px 0'}, 250);
          //$(this).children('a').animate({opacity: .1}, 25);
          $(this).children('a').css({ 'color': 'white'});
         // $(this).children('a').delay(150).animate({opacity: 1}, 175);
    });



    $('#navigation li').click(function() {
      $(this).addClass("active");    
    });

Так, например, при наведении курсора на «Школа» правильно не будет анимироваться положение фона, когда мышь уходит, но при нажатии «Миссия» добавится класс «активный», функция выхода из мыши все еще работает.

Есть идеи, почему?

Answer 1

.mouseleave() связывает обработчик с каждым элементом в наборе. В то время, когда обработчик связан, только один <li> имеет класс active, поэтому только этот элемент будет , а не иметь привязанный обработчик mouseleave.

Вместо этого используйте .live():

$('#navigation li:not(.active)').live('mouseleave', function ()
{
    $(this)
        .stop()
        .animate({backgroundPosition: '0px 0'}, 250)
        .children('a')
        .css({ 'color': 'white'});
});

или .delegate():

$('#navigation').delegate('li:not(.active)', 'mouseleave', function ()
{
    $(this)
        .stop()
        .animate({backgroundPosition: '0px 0'}, 250)
        .children('a')
        .css({ 'color': 'white'});
});

---

Редактировать

Довольно полная демонстрация: http://jsfiddle.net/mattball/2mqSr/

Answer 2

Это потому, что ваши события связаны с вашими функциями один раз.

Когда код

$('#navigation li').not('li.active').mouseleave(function() { // Code });

выполняется, ни один из <li> не имеет активного класса, поэтому событие привязано ко всем <li>. Вы можете использовать .live (), но лучшим решением было бы изменить функцию отпускания мыши так, чтобы она выглядела следующим образом:

$('#navigation li').mouseleave(function() {
      if($(this).hasClass('active'))
           return false;
      $(this).stop().animate({backgroundPosition: '0px 0'}, 250);
      //$(this).children('a').animate({opacity: .1}, 25);
      $(this).children('a').css({ 'color': 'white'});
      // $(this).children('a').delay(150).animate({opacity: 1}, 175);
});

Поскольку .live () может быть немного медленным, если у вас много <li> s

Answer 3

Ваше условие not оценивается только во время объявления, а не при возникновении события.Вам нужно проверить в методе события.

Итак, вы фактически говорите:

Все элементы li под элементом dom с именем «navigation», которые неприсвоенный им класс «активный» должен быть привязан к указанным обработчикам событий mouseover и mouseleave.

Так что не имеет значения, что вы делаете после того, как это сделано, LI, которые не являются"active", когда эти две инструкции выполняются, всегда будут запускать указанные функции mouseover и mouseleave.Вам нужно будет проверить присвоение класса внутри функций, чтобы оно действовало при запуске события.

Это не тот случай, когда ваш элемент "School" работает правильно, этопросто не привязан к обработчикам событий.

Answer 4

Вы никогда не удаляете класс active из других элементов, поэтому они складываются.

$('#navigation li').click(function() {
  $('#navigation li').removeClass("active"); // remove all initially
  $(this).addClass("active"); // add to the clicked one
});