Question

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

当我点击一个触发器时，它应该显示一个小的上下文框（让它工作）
当我在上下文框或触发器外部单击时，它应该消失（使其工作）
当我点击另一个触发器时，如果有另一个触发/上下文框已经激活/打开，它应该关闭另一个并打开最近点击的一个（不工作）

这是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

您在else点击中不需要.pulse-button。因为else块中的代码应该执行，任何.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");
});

Jquery点击事件定位多个元素

1 个答案:

UPDATED PEN