javascript - 重新关闭隐藏内容

Question

我有一个很大的文档，其中实现了很多。我希望有一种方法可以以某种方式简单地编辑 JavaScript，这样我就可以减少编辑工作。

基本上，单击一行文本会打开其下方的隐藏文本。您可以通过单击同一行文本来关闭并重新隐藏文本……这是我希望它运行的唯一方式。就像现在一样，您可以在任何地方单击隐藏文本，这也会将其关闭。这正在成为一个问题，因为我在隐藏文本区域中有交互式内容，并且在错误区域中意外单击会导致所有内容崩溃。

.results_container {
  cursor: pointer;
  line-height: 21px;
}

.hidden>span {
  display: none;
}

.visible>span {
  cursor: default;
  display: block;
  line-height: 18px;
  background: #f5f5f5;
  padding: 15px;
  margin: 10px 0px 32px 25px;
}

<div class="results_container">
  Click Me to show hidden content
  <span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>

Full Fiddle

注意:在 fiddle 上，我的 JavaScript 在最后，在粘贴的 jQuery 之下...抱歉，这是我让它工作的唯一方法。

Answer 1

请参阅 fiddle 或以下代码段: https://jsfiddle.net/ejbdb128/6/

通过针对父选择器检查“this”，您可以在单击子“span”元素时过滤掉。我应该注意一个警告，如果你点击“跨度”之外的任何地方和 div 元素，它会隐藏跨度，即使你不只是点击“点击我”文本..

/* SCRIPT for HIDDEN DESCRIPTIONS for RESULTS */
$(document).ready(function() {
  "use strict";
  $('.results_container').addClass("hidden");

  $('.results_container').click(function(e) {
    if (e.target != this) {
      return false;
    }
    var $this = $(this);

    if ($this.hasClass("hidden")) {
      $(this).removeClass("hidden").addClass("visible");

    } else {
      $(this).removeClass("visible").addClass("hidden");
    }
  });
});

.results_container {
  cursor: pointer;
  line-height: 21px;
}

.hidden>span {
  display: none;
}

.visible>span {
  cursor: default;
  display: block;
  line-height: 18px;
  background: #f5f5f5;
  padding: 15px;
  margin: 10px 0px 32px 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results_container">
  Click Me to show hidden content
  <span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>