1

当导航菜单打开时，我试图禁用导航切换按钮的悬停效果。当单击按钮并运行 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();
});

4

1 回答 1

2

首先，您使用navtoggle = false的是 'navtoggle 等于 false'，当您更新变量的值时，它将始终返回 true。

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

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

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

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

  if (navtoggle === false) {
    btnhover.play();
  }
}
于 2018-12-02T07:31:00.333 回答