重新關閉隱藏的內容

我有一個大文檔，這是實現了很多。我希望有一種方法可以簡單地編輯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

重新關閉隱藏的內容

回答

相關問題