点击当前类名显示block，并隐藏其他类名，并且如果当前类名处于显示状态则要display=“none”

Question

点击当前类名显示block，并隐藏其他类名，并且如果当前类名处于显示状态则要display=“none”。

但是我点击当前只能控制它自己的状态，我希望点击当前的.question其他的.answer都隐藏，怎么做呢？

相关代码

<div class="yy">
    <div class="answer-container">
        <a href="javascript:;" class="question">
            Why?
        </a>
        <a href="javascript:;" class="answer" style="display: none">
            Yes
        </a>
    </div>
    <div class="answer-container">
        <a href="javascript:;" class="question">
            Why?
        </a>
        <a href="javascript:;" class="answer" style="display: none">
            Yes
        </a>
    </div>
    <div class="answer-container">
        <a href="javascript:;" class="question">
            Why?
        </a>
        <a href="javascript:;" class="answer" style="display: none">
            Yes
        </a>
    </div>
</div>

for(let i=0;i<ANCON.length;i++){
    let none = ANCON[i].getElementsByClassName('answer')
    ANCON[i].onclick = function (e) {
        for (var j=0;j<none.length;j++){

            if(none[j].style.display=='none'){
                none[j].style.display='block'
            }
            else {
                none[j].style.display='none'
            }
        }
        
    }

我希望点击当前的.question其他的.answer都隐藏，希望大神能支招啊，感谢！

Answer 1

var aC = document.getElementsByClassName('answer-container');
for(var i=0;i<aC.length;i++){
  aC[i].onclick = accord(i);
}

//手风琴效果
function accord(i){
  return function(){
    var ans = document.getElementsByClassName('answer'),
        nAns = ans[i];
    if(nAns.style.display == 'block' )
      nAns.style.display = 'none';
    else{
      setDisplay(ans,'none');
      nAns.style.display = 'block';
    }
  }
}

//控制多个元素的显示隐藏
function setDisplay(dom,attr){
  for(var i=0;i<dom.length;i++){
    dom[i].style.display = attr;
  }
}

Answer 2

请改成这样 具体原因你自己体会区别

for (let i = 0; i < ANCON.length; i++) {
  (function(i){
    let none = ANCON[i].getElementsByClassName('answer')
    ANCON[i].onclick = function (e) {
      for (var j = 0; j < none.length; j++) {
  
        if (none[j].style.display == 'none') {
          none[j].style.display = 'block'
        }
        else {
          none[j].style.display = 'none'
        }
      }
  
    }
  })(i)
}