使用 Javascript (VanillaJS) 添加点击事件并显示/隐藏下一个元素

Question

我有一堆这样的 HTML 设置：

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

所以所有的按钮都是可见的，但所有的<ul> 都是隐藏的。单击按钮时，我希望它切换相邻的<ul> 以显示并再次单击以隐藏。

我有一些类似这样的代码，以便为按钮单击事件设置事件侦听器，但需要执行上述操作并将 aria-hidden 属性调整为 false。

var e, divs = document.getElementsByClassName('btns');
var index = 0;

var ul = document.getElementsByClassName('unorder-list');
// var list

for (e in divs) {
var i = e;
    if (divs.hasOwnProperty(e)) {
        divs[e].onclick = function() {
 
        // Returns 'namedItem'
        alert(e);

         // Returns undefined
         alert(ul[index]);

         // Error    
         var visible = ul[index].style.display;

         // Do work here to show/hide and adjust attributes as needed
            
         alert(visibile);
         // document.getElementById(id).style.display = 'block';

        };


        index++;
    }
}

我写这篇文章是为了确保代码格式正确且易于访问。

Answer 1

function showme(idx){

document.getElementsByTagName('button')[idx].nextElementSibling.classList.toggle("showme")

}

ul{
visibility:hidden;}

.showme{
visibility:visible;}

<button class="btns" onclick='showme(0)'>Button A</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>


<button class="btns" onclick='showme(1)'>Button B</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

Answer 2

document.querySelector("body").onclick =({target})=>
  target.classList.contains("btns") &&
  target.nextElementSibling.classList.toggle("show")

ul.unorder-list {visibility:hidden}
ul.show         {visibility:visible}

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

我删除了用于处理aria-hidden 属性的脚本部分，因为当元素对用户可见或隐藏时不应更改这些部分。每当一个元素是hidden 时，它都会对 ARIA（“可访问的富互联网应用程序”）读者隐藏！ aria-hidden 应仅在通常需要从 ARIA 阅读器处理中排除元素时使用，请参阅 here（特别是 Andrei Bârsan 和 eenblam 在接受的答案下的 cmets）。

我的点击处理程序实际上是绑定到按钮的父容器（委托事件处理）。这样，任何动态添加的按钮和<ul>s 都会自动以相同的方式处理。

Answer 3

我的建议：

var list, setAria;

document.querySelectorAll('.btns').forEach(el => {
  el.onclick = () => {
    list = el.nextElementSibling;
    list.classList.toggle('show');
    setAria = list.getAttribute('aria-hidden') == 'true' ? 'false' : 'true';
    list.setAttribute('aria-hidden', setAria);
  }
});

ul {
  visibility: hidden;
}

.show {
  visibility: visible;
}

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

不处理aria-hidden属性，JS代码可以简单的：

document.querySelectorAll('.btns').forEach(el => {
  el.onclick = () => el.nextElementSibling.classList.toggle('show');
});