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

Question

我需要更改属性＆aria-expanded＆＃39;来自＆＃39; true＆＃39;到＆＃39;假＆＃39;只需单击即可获得所有UL和所有LI。 我很难弄清楚如何做到这一点。

这是示例html

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你能帮帮我吗？

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>