重新关闭隐藏的内容

我有一个大文档，这是实现了很多。我希望有一种方法可以简单地编辑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中......对不起，这是我能得到它的唯一途径上班。

来源

2017-06-20 flipflopmedia

见小提琴或下面的代码片段： 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>

来源

2017-06-20 13:45:49 Woodrow

显然，你的脚本不能正常工作！：）谢谢。但是，它不能与我的完整设置一起工作。我应该添加完整的代码;我不认为这会干涉。我已经更新了小提琴，并希望你可以进一步帮助这个？ https://jsfiddle.net/flipflopmedia/ejbdb128/7/ – flipflopmedia

这是更新的小提琴：https：//jsfiddle.net/ejbdb128/8/ – Woodrow

辉煌的伍德罗！辉煌！我无法告诉你我是多么感激你的帮助！竖起大拇指！ – flipflopmedia

单击处理程序添加到外部事件，并用它来掩盖。顺便说一句，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/

来源

2017-06-20 13:51:01

谢谢，但我确实希望只是一个JavaScript编辑/修复。我的文档超过10,000行，正如我所提到的，这些代码在整个过程中都被使用了很多，因此我试图避免编辑这么多。谢谢！ – flipflopmedia

重新关闭隐藏的内容

回答

相关问题