重新关闭隐藏内容

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

请参阅小提琴或下面的片段：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>

​

Javscript：

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

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

小提琴：https://jsfiddle.net/fLj6c4q7/