jQuery点击事件定位到多个元素

Question

Codepen is here

I have two triggers on an image. General behaviour:

• When I click a trigger, it should reveal a small context box (got this working)
• When I click outside of the context box OR the trigger, it should disappear (got this working)
• When I click another trigger, if there is another trigger/context box that is already active/open, it should close the other one and open the recently click one (not working)

Here's the html:

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

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

Here's my 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();
});

What could I be doing wrong here?

Answer 1

You don't need the else in your .pulse-button click. Because the code in else block should be executed either any .pulse-button has class pulse-button-active or not. Change the your click event like following.

$(".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