触发器没有采用活动类

Question

相关Codepen

预期功能：

• 如果单击触发器，则必须显示相应的元素
• 如果单击另一个触发器，则该触发器的元素将显示，而另一个则关闭
• 如果在触发器打开时单击它，它只会关闭元素。

目前的问题：

现在，单击触发器后显示的目标元素坚持上述要求，但触发器本身似乎没有采用“活动”类。当按下触发器时，应该变成红色(这意味着它有“活动”类)。

html：

<ul>
    <li>
         <span class="trigger" data-target-id="target-1">Trigger 1</span>
         <div id="target-1" class="target">Target to reveal when I press Trigger 1</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-2">Trigger 2</span>
         <div id="target-2" class="target">Target to reveal when I press Trigger 2</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-3">Trigger 3</span>
    </li>
</ul>

<div id="target-3" class="target">Target to reveal when I press Trigger 3</div>

jQuery：

var trigger = ".trigger";
var recipient = ".target";
var not_trigger = $(".trigger").not(this);

$(trigger).click(function(e) {
  e.stopPropagation();
  recipient = '#' + $(this).attr('data-target-id');
  var not_recipient = $(".target").not(recipient);

// This handles the trigger element      

  if($(trigger).hasClass("active")){
    $(not_trigger).removeClass("active");
  }else{
    $(this).addClass("active");
  }

// This disgracefully handles the recipient element 

  if($(".target").hasClass("open")){
    $(not_recipient).removeClass("open");
    TweenMax.to($(".target"), .3, {display:'none', y:'0%', autoAlpha:0});

    if($(recipient).hasClass("open")){
      $(recipient).removeClass("open");
      TweenMax.to(recipient, .3, {display:'none', y:'0%', autoAlpha:0});
    }else{
      $(recipient).addClass("open");
      TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1});
    }
  }else {
    $(recipient).addClass("open");
    TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1});
  }

});

Answer 1

您粘贴的代码中的问题是，它永远不会进入if块，因为元素在单击发生时没有active类。

替换

 if($(trigger).hasClass("active")){
    $(not_trigger).removeClass("active");
    $(this).toggleClass("active") ;
  }

使用

$(trigger).not(this).removeClass("active");
$(this).toggleClass("active");

使其与您拥有的代码相同的一种方法是，将任何li.trigger设置为HTML中的active。但这仍然不能解释自我点击的原因。

jsBin演示

Answer 2

解决这一问题的最简单方法是在单击其中一个触发器时从所有触发器中删除active类，并将其添加到当前触发器中：

if($(trigger).hasClass("active")){
    $(trigger).removeClass("active");
}
$(this).addClass("active");

编辑：选项，如果当前被选中：

if($(trigger).hasClass("active")){
    $(trigger).not(this).removeClass("active");
}
$(this).toggleClass("active") ; 

CodePen