javascript - 单击元素外部以隐藏元素

Question

我的代码是这样做的:当元素 .pencil 被点击时，它切换隐藏元素 .pencilpanel。当在 this .test 元素之外单击时(有两个 .test 元素)，然后 this .pencilpanel 应该隐藏。

但是，我的问题是:

1) 当点击第二个 .test 元素时，第一个 .test 元素在应该隐藏时仍然可见。而且，

2) 当第一个.pencil元素被点击，并且它对应的.pencilpanel也被点击时，它会隐藏 .pencilpanel，当它应该保持可见时。当前在 .test 中可见的任何元素，如果被点击，不应被隐藏，除非被点击的元素位于在 current .test 元素之外。

所以我不明白为什么在 .pencilpanel 上单击时，它会将其隐藏在这一行 if(!$(this).closest('.test') .length && $('.pencilpanel').is(":visible")) {.事实上，当单击另一个 .pencil 时，第一个 .pencilpanel 应该隐藏时它仍然可见。这是我的代码:

$(document).ready(function () {
    $('.pencil').on('click', function (event) {
        event.stopPropagation();
        $(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
    });
});

$(document).ready(function () {
    $(document).click(function () {
        if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
            $('.pencilpanel').removeClass("displayblock");
        }
    });
});

.pencilpanel {
    display: none;
}

.displayblock {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

Answer 1

您可以使用 document.activeElement 在关闭面板之前进行检查。请找到修改后的代码。

$(document).ready(function() {

  $('.pencil').on('click', function(event) {
    event.stopPropagation();
    closePanel();
    $(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
  });

  $(document).on("click", function() {
    if (document.activeElement.tagName != 'TEXTAREA')
      closePanel();
  });

});


function closePanel() {
  $('.pencilpanel').removeClass("displayblock");
}

.pencilpanel {
  display: none;
}

.displayblock {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>