Javascript 触发器isn'；不要采用活跃的课堂

预期功能：

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

当前问题：

现在，单击触发器后显示的目标元素符合上述要求，但触发器本身似乎没有采用“active”类。按下触发器时，触发器应变为红色（表示它具有“活动”类）

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>

---

解决此问题的最简单方法是在单击其中一个触发器时从所有触发器中删除

活动的
类，并将其添加到当前触发器中：

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

编辑：
如果当前选中，则切换：

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

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

替换

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

与

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

这仍然不能解决在同一元素上单击时切换类的问题。@Sushanth--你是对的。看看我的更新。
 if($(trigger).hasClass("active")){
    $(not_trigger).removeClass("active");
    $(this).toggleClass("active") ;
  }

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