纯JavaScript !! onclick仅影响同一级别的类名

Question

这是我到目前为止的代码：

＆＃13;

＆＃13;

function toggleClass(element, className){
  if (!element || !className){
    return;
  }

  var classString = element.className, nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  }
  else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
  }
  element.className = classString;
}

function dropDown() {
  toggleClass(document.getElementById('overlay'), 'overlayOpen');
}

＆＃13;

.overlayOpen {
  opacity:1 !important;
  height: 200px !important;
  width: 100% !important;
}
#overlay {
  width:100%;
  z-index: 1000;
  background-color: red;
  overflow: hidden;
  max-width: 800px;
  opacity:0;
  height: 0;
  width: 0;
  -webkit-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -moz-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -o-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -ms-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  transition: width 0.2s, height 0.2s, opacity 0.2s ease;
}

＆＃13;

<ul>
  <li id='1' onclick='dropDown()'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='2' onclick='dropDown()'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='3' onclick='dropDown()'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='4' onclick='dropDown()'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

问题在于，无论您是点击第一个第二个第三个还是第四个，它始终会打开第一个下拉列表。我是JS的新手，所以很高兴知道每次点击都可以打开旁边的元素而不是第一个。

哦，请不要建议任何Jquery解决方案。

感谢您的帮助

Answer 1

尝试在this参数上使用dropDown，并更新dropDown功能。

＆＃13;

＆＃13;

function toggleClass(element, className){
  if (!element || !className){
    return;
  }

  

  var classString = element.className, nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  }
  else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
  }
  element.className = classString;
}

function dropDown(el) {
 var el2 = el.nextElementSibling;
  toggleClass(el2, 'overlayOpen');
}

＆＃13;

.overlayOpen {
  opacity:1 !important;
  height: 200px !important;
  width: 100% !important;
}
#overlay {
  width:100%;
  z-index: 1000;
  background-color: red;
  overflow: hidden;
  max-width: 800px;
  opacity:0;
  height: 0;
  width: 0;
  -webkit-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -moz-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -o-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  -ms-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
  transition: width 0.2s, height 0.2s, opacity 0.2s ease;
}

＆＃13;

<ul>
  <li id='1' onclick='dropDown(this)'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='2' onclick='dropDown(this)'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='3' onclick='dropDown(this)'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>
<ul>
  <li id='4' onclick='dropDown(this)'>Some text</li>
  <li id='overlay'>Some content to be shown on click</li>
</ul>

＆＃13;

＆＃13;

＆＃13;