Question

我有一个导航菜单，可以在打开和关闭时激活。我使用GSAP中的动画对象TimelineLite。我只需要在菜单打开后创建它，然后我可以随时使用它。菜单关闭后，我将删除该变量，因为它无用。我想避免在click事件之外将其声明为全局变量。有没有更好的逻辑方法来做到这一点，还是我应该坚持声明一个全局变量？

$('.dropdown-toggle').on('click', function() {

  if ($(this).is('.top-toggler:not(.active)')) { // If main menu dropdown toggler is inactive
    // Declare the animating object
    var navTimeline = new TimelineLite(new TweenLite($(this).next('.toggleable').children(), 0.75, {margin: '0', transform: 'perspective(320px) rotateX(0deg)', boxShadow: 'inset 0px 0px 20px 0px rgba(0,0,0,0)'}));
    $(this).addClass('active'); // Give the button class active
    navTimeline.play(); // Open up the menu using the animation
    return;
  }

  if ($(this).hasClass('active')) { // If it is active
    navTimeline.reverse(); // Reverse the animation to close it
  }

});

Answer 1

您可以使用jQuery的data()方法将对象保存到元素的jQuery数据缓存中。然后，您可以在需要时删除/取消它

if ($(this).is('.top-toggler:not(.active)')) {
  var navTimeline = new TimelineLite(...);
  $(this).data("timeline",navTimeline)
  //...
}

if ($(this).hasClass('active')) { 
  var navTimeline = $(this).data("timeline");
  navTimeline.reverse();
  $(this).data("timeline",null);
}

Answer 2

如果您真的只想避免全局变量，可以使用IIFE：

(function() {
  var navTimeline;

  $('.dropdown-toggle').on('click', function() {

    if ($(this).is('.top-toggler:not(.active)')) { // If main menu dropdown toggler is inactive
      // DO NOT declare here, declared in the IIFE scope
      navTimeline = new TimelineLite(new TweenLite($(this).next('.toggleable').children(), 0.75, {margin: '0', transform: 'perspective(320px) rotateX(0deg)', boxShadow: 'inset 0px 0px 20px 0px rgba(0,0,0,0)'}));
      $(this).addClass('active'); // Give the button class active
      navTimeline.play(); // Open up the menu using the animation
      return;
    }

    if ($(this).hasClass('active')) { // If it is active
      navTimeline.reverse(); // Reverse the animation to close it
    }

  });
})();  // execute the IIFE

如果在两个if语句之间声明if语句范围，如何在其中一个if语句中使用JavaScript变量？

2 个答案: