Question

我错过了我正在努力的最后1％的页脚元素。

我想要做的事情的逻辑应该是显而易见的：当我将鼠标悬停在页脚上时，我希望显示EXPAND这个词，并且我希望在页脚展开时显示HIDE这个词。

当页脚展开时，除了HIDE部分外，我的一切都正常工作 - 当我从页脚块中移开时，它再次显示单词EXPAND。我想停止发生悬停事件。或者至少我认为这就是我想要做的。

=＆gt; JSFiddle会告诉您我在说什么。

感谢帮助，

特里

$(document).ready(function() {
  $("#shows").click(function () {
      $('footer').toggleClass("highlight");
      $('#shows').text('Hide');
    });
    $("footer").hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );    
});

Answer 1

我认为您要做的是根据页脚是否具有“突出显示”类来更改#shows的悬停文本。我将您的悬停处理程序更改为：

$("footer").hover(
    function () {
        $('#shows').text($('footer').hasClass("highlight") ? "Hide" : "+Expand");
    },
    function () {
        $('#shows').text('Shows');
    }
);

Modified Fiddle

Answer 2

您正在寻找的是战略性地呼叫unbind。这适用于你的小提琴：

function setNotExpanded(elem) {
    $(elem).unbind('mouseenter mouseleave').hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );
}

function setExpanded(elem) {
    $(elem).unbind('mouseenter mouseleave');   
}

$(document).ready(function() {

  $("#shows").click(function () {
      if ($('footer').hasClass('highlight')) {
        $('#shows').text('Shows');
        setNotExpanded('footer');  
      } else {                
          $('#shows').text('Hide');
          setExpanded('footer');
      }
      $('footer').toggleClass("highlight");
    });            

  setNotExpanded('footer');

});

jQuery事件逻辑/操作顺序

2 个答案: