Question

单击按钮会显示并隐藏相应的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;
fiddle example
但是，如何在区域外点击时隐藏内容，和显示下一个内容一样，隐藏前一个内容？ 2.如果不使用id，是否可以这样做？只有纯粹的javascript。谢谢。

Answer 1

这可能不是一个完美的解决方案，但这是一个命题：

＆＃13;

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();
    }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

关于避免id，您可以在click事件上使用target属性并找到兄弟节点或类似的东西或使用querySelector。但是我会说，ids是安全和好的。

Answer 2

未附加内联点击次数。
不使用ID。
用于IE 11的向后兼容语法。

＆＃13;

// 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();
    	
}

＆＃13;

/* 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;}

＆＃13;

<!-- 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>

＆＃13;

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

如何通过点击其区域外隐藏当前内容，以及当我在IE11中显示其他内容时？

2 个答案: