當我在IE11中顯示其他內容時，如何通過單擊其區域以外的區域隱藏當前內容？

Question

單擊按鈕顯示並隱藏相應的內容。

  function funC(id) { var el = document.getElementById(id); if(el.style.display == 'inline-block') el.style.display = ''; else el.style.display = 'inline-block'; } 

 button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} 

 <button onclick="funC('cnt1');">b1</button><span id="cnt1" class="cb">content b1...</span> <br /> <button onclick="funC('cnt2');">b2</button><span id="cnt2" class="cb">content b2...</span> <br /> <button onclick="funC('cnt3');">b3</button><span id="cnt3" class="cb">content b3...</span> 

小提琴的例子
1.但是，如何在單擊內容區域之外時隱藏內容，並且與顯示下一個內容一樣，隱藏上一個內容？
2.是否可以不使用id而做同樣的事情？
只有純JavaScript。 謝謝。

Answer 1

這可能不是一個完美的解決方案，但這是一個建議：

 function hideAllContent() { var elements = document.querySelectorAll(".cb"); for(var i =0, l = elements.length; i < l; i++) { var element = elements[i]; element.visible = false; element.style.display='none'; } } function funC(id, event) { // We need to stop the event to avoid bubling until the body event.stopPropagation(); // let's hide others before displaying the new one hideAllContent(); var el = document.getElementById(id); if(el.visible) { el.visible = false; el.style.display = 'none'; } else { el.visible = true; el.style.display = 'inline-block'; } } document.body.onclick = function(event) { if (!event.target.classList.contains('cb')) { hideAllContent(); } } 

 button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} 

 <button onclick="funC('cnt1', event);">b1</button><span id="cnt1" class="cb">content b1...</span> <br /> <button onclick="funC('cnt2', event);">b2</button><span id="cnt2" class="cb">content b2...</span> <br /> <button onclick="funC('cnt3', event);">b3</button><span id="cnt3" class="cb">content b3...</span> 

關於避免ID，您可以在click事件上使用target屬性，然后找到同級節點或類似的節點，或者使用querySelector。 但是身份證很安全，我會說。

Answer 2

• 沒有附加的內聯點擊。
• 不使用ID。
• 對IE 11使用了向后兼容的語法。

 // JavaScript // get all button and span tags var btns = document.querySelectorAll('button'); var otherSpans = document.querySelectorAll('span'); // Detect all clicks on the document document.addEventListener("click", function(event) { const spanElems = document.querySelectorAll('span'); const spanElemsArray = Array.prototype.slice.call(spanElems); let matches = event.target.matches ? event.target.matches('button') : event.target.msMatchesSelector('button'); // If user clicks inside the element, do nothing if (matches) { return; } else { // If user clicks outside the element, hide it! spanElemsArray.forEach( function (spanElem) { spanElem.classList.remove("open"); }); } }); // convert buttons and spans variable objects to arrays const btnsArray = Array.prototype.slice.call(btns); const otherSpansArray = Array.prototype.slice.call(otherSpans); // loop through every button and assign a click to each one btnsArray.forEach( function (btn) { btn.addEventListener('click', spanFunc) }); // Pass the button clicked as a reference function spanFunc(){ openSpan(this); } // toggle the display class on the span next to the button using nextElementSibling method function openSpan(e) { e.nextElementSibling.classList.toggle("open"); // hide every other spans function otherSpanFunc() { otherSpansArray.forEach( function (otherSpan) { if (otherSpan !== e.nextElementSibling) { otherSpan.classList.remove('open'); } }); } otherSpanFunc(); } 

 /* css */ button {margin:2px; outline:0; font-size:12px;} span {padding:2px; border:1px solid silver; font-size:12px;} .cb {display:none;} .open {display:inline-block;} 

 <!-- HTML --> <button>b1</button><span class="cb">content b1...</span> <br /> <button>b2</button><span class="cb">content b2...</span> <br /> <button>b3</button><span class="cb">content b3...</span> 

---

jsFiddle： https ://jsfiddle.net/ypofz4d5/55/