代码之家 › 专栏 › 技术社区 › cdub

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

ecmascript-6 html javascript

cdub · 技术社区 · 4 年前

我有一堆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++;
    }
}

我写这篇文章是为了确保代码格式良好且可访问。

1 回复 | 直到 4 年前

DCR 4 年前

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>

Carsten Massmann 4 年前

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阅读器处理中排除,请参阅 here (特别是安德烈·布尔桑和恩布拉姆在公认答案下的评论)。

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

AbsoluteBeginner 4 年前

我的建议:

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