Question

我有一个很大的文件，这是实施的很多。我希望有一种方法可以简单地编辑JavaScript，所以编辑的次数较少。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Full Fiddle

注意：在小提琴上，我的JavaScript最终是在粘贴的jQuery下...抱歉，这是我能够让它工作的唯一方式。

Answer 1

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

Javscript：

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

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

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

重新关闭隐藏的内容

2 个答案: