重新关闭隐藏内容

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

注意：在小提琴上，我的 JavaScript 在最后，在粘贴的 jQuery 下......对不起，这是我让它工作的唯一方法。

Answer 1

见小提琴或下面的sn-p： https://jsfiddle.net/ejbdb128/6/

通过检查父选择器的“this”，您可以在单击子“span”元素时过滤掉。我应该注意的是，如果您单击“span”之外的任何位置并且在 div 元素中，它会隐藏 span，即使您不只单击“Click Me”文本。..

/* 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>

Answer 2

将点击处理程序添加到外部事件并使用它来隐藏。顺便说一句，jQuery 内置了函数hide 和toggle 用于隐藏元素。

HTML：

<div class="results_container">
<span class="clickme">Click Me to show hidden content</span>   
<span class="hideme">
    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>

JavaScript：

$(document).ready(function(){
"use strict";
  $('.hideme').hide();

  $('.clickme').on('click', function() {
    $('.hideme').toggle();
  });
});

在这里提琴：https://jsfiddle.net/fLj6c4q7/