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

Question

我试图在导航菜单打开时禁用导航切换按钮的悬停效果。单击按钮时我正在切换一个类，并运行一个 if 语句，该语句表示它应该只在类未切换时运行动画。我可以在控制台中看到 div.toggle-btn 正在切换禁用悬停类，但它并没有像我预期的那样禁用/启用 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 equals false”，当您更新变量值时，它将始终返回 true。

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

其次，您也没有在 btnover/btnout 函数内部检查按钮是否具有禁用类。您应该在这些函数中添加一个条件来检查动画是否应该播放。

最后，您需要实际检查按钮在每次悬停时是否具有类。一旦你设置了 navtoggle 变量，它就不会再改变了。检查 btnover/btnout 函数的内部，看看按钮是否有说类。

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

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