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是否为假，我想您还需要检查真实值

导航菜单打开时，禁用导航切换的悬停效果

1 个答案: