当我在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/