Question

我生成了多个菜单，但它们在我的内容中有不同的菜单项和不同的位置。

对于每个＆＃39; .ff_ftmenu＆＃39;和＆＃39; .ff_ftmenu_block＆＃39;有一个单独的ID，因此ffmenu-0例如匹配。

点击＆＃39; .ff_ftmenu_block＃ffmenu-0＆＃39;和＆＃39; .ff_ftmenu＃ffmenu-0＆＃39;被触发并打开。这就是主意。但是如何分配＆＃39; ffmenu - ＆＃39; + index＆＃39;循环所以只有一个会打开？

  var tl = new TimelineMax({paused:true, reversed:true});
  tl
    .staggerFromTo('.ff_ftmenu li', 1.5,
      {rotationX:-90, transformOrigin:"50% 0%"},
      {rotationX:0, ease:Elastic.easeOut}, 0.4);

  $('.ff_ftmenu').each(function(index){
    $(this).attr('id', 'ffmenu-' + index);
    //console.log( this.id );
  });

  $('.ff_ftmenu_block').each(function(index){
    $(this).attr('id', 'ffmenu-' + index);
  });

  $('.ff_ftmenu_block').each(function(index){
    $(this).click(function(index){
    $('.swp-col-1-3 .ff_ftmenu').toggleClass('open');

      if (!$('.swp-col-1-3 .ff_ftmenu').hasClass('open')) {
        TweenMax.to($('.swp-col-1-3 .ff_ftmenu'), 0.5, {opacity: 0});
        tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
      }
      else {
        TweenMax.to($('.swp-col-1-3 .ff_ftmenu'), 1, {opacity: 1});
        tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
      }

    });
  });

Answer 1

在这种情况下使用jQuery来获取你点击的元素，你不需要每个元素。所以我认为你可以替换

$('.ff_ftmenu_block').each(function(index){
$(this).click(function(index){
$('.swp-col-1-3 .ff_ftmenu').toggleClass('open');

  if (!$('.swp-col-1-3 .ff_ftmenu').hasClass('open')) {
    TweenMax.to($('.swp-col-1-3 .ff_ftmenu'), 0.5, {opacity: 0});
    tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
  }
  else {
    TweenMax.to($('.swp-col-1-3 .ff_ftmenu'), 1, {opacity: 1});
    tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
  }

});

（只是为了给你一个起点 - 想法）

$('.ff_ftmenu_block').on('click', function(){
    console.log($(this).attr('id');
    // move on from here with the id
    // and do whatever you want to do
});

为每个div添加动态ID，稍后再调用它们

1 个答案: