javascript - Jquery click 事件针对多个元素

Question

Codepen is here

我在一张图像上有两个触发器。一般行为:

• 当我点击触发器时，它应该会显示一个小的上下文框(可以正常工作)
• 当我在上下文框或触发器之外单击时，它应该消失(让这个工作正常)
• 当我单击另一个触发器时，如果有另一个触发器/上下文框已处于事件/打开状态，则应关闭另一个触发器/上下文框并打开最近单击的一个(不起作用)

这是 html:

<span class='pulse-button' id="button-1"></span>

<div class="content-box context-closed tabs" id="tabs1">
</div>

这是我的 jQuery:

$(function(){
  $(".pulse-button").click(function(e){
    e.stopPropagation();
    if( $(".pulse-button").not(this).hasClass("pulse-button-active")){
      $(".pulse-button").not(this).removeClass("pulse-button-active");
      $(".pulse-button").not(this).next().addClass("context-closed");
    }else{
      $(this).addClass("pulse-button-active");  
      $(this).next().removeClass("context-closed");
    };
  });

  $("body").click(function(evt){
    if(evt.target.class == "content-box")
      return;
    if($(evt.target).closest('.content-box').length)
          return;
    if( $(".pulse-button").hasClass("pulse-button-active")){
      $(".pulse-button").removeClass("pulse-button-active");
      $(".pulse-button").next().addClass("context-closed");
    };
  });

  $( "#tabs1,#tabs2" ).tabs();
});

我在这里可能做错了什么？

Answer 1

您的 .pulse-button 点击中不需要 else。因为 else block 中的代码应该执行任何具有 pulse-button-active 类的 .pulse-button 或不具有类 pulse-button-active 的代码。更改您的点击事件，如下所示。

$(".pulse-button").click(function(e){
    e.stopPropagation();
    if($(".pulse-button").not(this).hasClass("pulse-button-active")) {
        $(".pulse-button").not(this).removeClass("pulse-button-active");
        $(".pulse-button").not(this).next().addClass("context-closed");
    }
    $(this).addClass("pulse-button-active");  
    $(this).next().removeClass("context-closed");
});

UPDATED PEN