重新关闭隐藏内容

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" 元素时过滤掉。我应该注意一个警告，如果你点击 "span" 之外的任何地方和 div 元素，它会隐藏跨度，即使你不只点击 "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();
  });
});

Fiddle 这里：https://jsfiddle.net/fLj6c4q7/

重新关闭隐藏内容

Re-closing hidden content

javascript

jquery

hidden

collapse