导航打开时禁用导航切换按钮的悬停效果

Question

我正在尝试在导航菜单打开时禁用导航切换按钮的悬停效果。单击按钮时，我在切换一个类，并运行一条if语句，该语句仅在未切换该类的情况下才应运行动画。我可以在控制台中看到div.toggle-btn切换了disable-hover类，但它没有像我期望的那样禁用/启用javascript代码。

var btnhover = new TimelineMax({paused: true});

    var navtoggle = $('.toggle-btn').hasClass('disable-hover');

    if (navtoggle === false) {
      if ($(window).width() >= 768) {
        btnhover.to(".one", .3, {
           y: 5,
           ease: Expo.easeInOut,
        })}
      else {
        btnhover.to(".one", .3, {
           x: -5,
           ease: Expo.easeInOut,
        })
      }
    }

    if (navtoggle === false) {
      if ($(window).width() >= 768) {
        btnhover.to(".two", .3, {
           y: -5,
           ease: Expo.easeInOut,
           delay: -.3
        })}
      else {
        btnhover.to(".two", .3, {
           x: 5,
           ease: Expo.easeInOut,
           delay: -.3
        })
      }
    }

    function btnover(){
      if (navtoggle === false) {
        btnhover.play();
      }
    }

    function btnout(){
      if (navtoggle === false) {
        btnhover.reverse();
      }
    }

    $(".toggle-btn").hover(btnover, btnout);


    function disableHover() {
      $("div.toggle-btn").toggleClass("disable-hover");
    }

$(document).on("click", ".toggle-btn", function() {
      disableHover();
});

Answer 1

首先，您正在使用navtoggle = false，它将转换为“ navtoggle等于false”，并且在更新变量的值时，它将始终返回true。

您要使用navtoggle === false或!navtoggle，它们将转换为“ navtoggle是否等于false？”。

第二，您还没有在btnover / btnout函数内部检查按钮是否具有禁用类。您应该在这些函数的内部添加一个条件，以检查动画是否应该播放。

最后，您需要实际检查按钮在每个悬停时是否具有类。设置navtoggle变量后，它将不会再次更改。检查btnover / btnout函数的内部，看看button是否具有所述类。

function btnover(){
  var navtoggle = $('.toggle-btn').hasClass('disable-hover');

  if (navtoggle === false) {
    btnhover.play();
  }
}