重新关闭隐藏的内容
我有一个大文档,这是实现了很多。我希望有一种方法可以简单地编辑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>
注:在小提琴,我的JavaScript是在年末,粘贴,jQuery中......对不起,这是我能得到它的唯一途径上班。
见小提琴或下面的代码片段: https://jsfiddle.net/ejbdb128/6/
通过对检查“本”在问候父选择器,可以过滤掉当你点击子“跨度”元素。我应该注意的一个警告是,如果你点击“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>
单击处理程序添加到外部事件,并用它来掩盖。顺便说一句,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();
});
});
谢谢,但我确实希望只是一个JavaScript编辑/修复。我的文档超过10,000行,正如我所提到的,这些代码在整个过程中都被使用了很多,因此我试图避免编辑这么多。谢谢! – flipflopmedia
显然,你的脚本不能正常工作! :) 谢谢。但是,它不能与我的完整设置一起工作。我应该添加完整的代码;我不认为这会干涉。我已经更新了小提琴,并希望你可以进一步帮助这个? https://jsfiddle.net/flipflopmedia/ejbdb128/7/ – flipflopmedia
这是更新的小提琴:https://jsfiddle.net/ejbdb128/8/ – Woodrow
辉煌的伍德罗!辉煌!我无法告诉你我是多么感激你的帮助!竖起大拇指! – flipflopmedia