单击即可更改所有 UL 和 LI 标签的属性

Question

我需要一次单击将所有 UL 和所有 LI 的属性 'aria-expanded' 从 'true' 更改为 'false'。我很难弄清楚该怎么做。

这是示例 html

<h2>List 1 </h2>
<ul aria-expanded="true">
  <li aria-expanded="true">Orange
   
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>Mango</li>
  <li>Pineapple</li>
</ul>
<h2>List 2</h2>
<ul aria-expanded="true">
  <li>Orange</li>
  <li aria-expanded="true">Mango
   
    <ul>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
  </li>
  <li>Pineapple</li>
</ul>
<h2>List 3</h2>
<ul aria-expanded="true">
  <li>Orange</li>
  <li>Mango</li>
  <li aria-expanded="true">Pineapple
   
    <ul>
      <li>G</li>
      <li>H</li>
      <li>I</li>
    </ul>
  </li>
</ul>
<button onclick="changeAttr()">Change attribute</button>

你能帮我做一下吗？

Answer 1

function changeAttr () {
  document
    .querySelectorAll("ul[aria-expanded='true'], li[aria-expanded='true']")
    .forEach(node=>node.setAttribute('aria-expanded', false))
}

<h2>List 1 </h2>
<ul aria-expanded="true">
  <li aria-expanded="true">Orange
   
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>Mango</li>
  <li>Pineapple</li>
</ul>
<h2>List 2</h2>
<ul aria-expanded="true">
  <li>Orange</li>
  <li aria-expanded="true">Mango
   
    <ul>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
  </li>
  <li>Pineapple</li>
</ul>
<h2>List 3</h2>
<ul aria-expanded="true">
  <li>Orange</li>
  <li>Mango</li>
  <li aria-expanded="true">Pineapple
   
    <ul>
      <li>G</li>
      <li>H</li>
      <li>I</li>
    </ul>
  </li>
</ul>
<button onclick="changeAttr()">Change attribute</button>

Answer 2

好的，我试过了，成功了！

function changeAttr() {
 var myUL = document.getElementsByClassName('mainMenu');
 var myLI = document.getElementsByClassName('childMenu');
 for (var obj of myUL) {
  obj.setAttribute('aria-expanded', 'false');
 }
}

<h2>List 1 </h2>
<ul class="mainMenu" aria-expanded="true">
  <li class="childMenu" aria-expanded="true">Orange
   
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li class="childMenu" aria-expanded="false">Mango</li>
  <li class="childMenu" aria-expanded="false">Pineapple</li>
</ul>
<h2>List 2</h2>
<ul class="mainMenu" aria-expanded="true">
  <li class="childMenu" aria-expanded="false">Orange</li>
  <li class="childMenu" aria-expanded="true">Mango
   
    <ul>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
  </li>
  <li class="childMenu" aria-expanded="false">Pineapple</li>
</ul>
<h2>List 3</h2>
<ul class="mainMenu" aria-expanded="true">
  <li class="childMenu" aria-expanded="false">Orange</li>
  <li class="childMenu" aria-expanded="false">Mango</li>
  <li class="childMenu" aria-expanded="true">Pineapple
   
    <ul>
      <li>G</li>
      <li>H</li>
      <li>I</li>
    </ul>
  </li>
</ul>
<button onclick="changeAttr()">Change attribute</button>

单击即可更改所有 UL 和 LI 标签的属性

Change attribute of all UL and LI tags on a single click

javascript

arrays

attributes

setattribute