Question

我正在尝试这样做，以便当li元素悬停时，背景位置发生变化（效果很好），单击时它会保持第二个活动状态（根本不工作）。如果在HTML中已经将“active”类应用于元素，则它可以工作。我已经尝试了很长一段时间我能想到和搜索的内容，但似乎无法弄明白。

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");    
    });

因此，例如，鼠标悬停时，将鼠标悬停在“School”上将无法正确显示背景位置，但点击“Mission”时会添加“active”类，mouseleave功能仍会运行。

任何想法为什么？

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

您永远不会从其他元素中删除active类，因此它们会相加。

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

Answer 3

您的not条件仅在声明时进行评估，而不是在事件触发时进行评估。您需要在事件方法中进行检查。

所以你实际上说的是

dom元素下名为“navigation”的所有li元素都没有赋予它们“active”类，应该绑定到给定的mouseover和mouseleave事件处理程序。

所以在完成之后你做了什么并不重要，当这两个指令运行时，那些没有“活动”的LI将始终运行mouseover和mouseleave函数。您需要检查里面的类函数，以便在触发事件时对其进行操作。

这不是你的“School”元素正常工作的情况，它根本没有绑定到事件处理程序。

Answer 4

这是因为您的事件一旦绑定到您的函数。

当代码

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

执行，<li>没有一个具有活动类，因此事件绑定到所有<li>。您可以使用.live（），但更好的解决方案是将mouseleave函数更改为如下所示：

$('#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);
});

如果你有很多<li> s，那么.live（）可能会有点慢

“.mouseleave”不尊重jQuery中的“.not”

4 个答案:

修改