我有两个可折叠列表和两个按钮，我希望如果我单击第一个按钮，第一个列表中的所有标题都得到一个新的文本（如“你好，我的名字是Max”），如果我单击第二个按钮，它应该向第二个列表的所有主体添加一个新按钮。

我正在寻找JavaScript中的解决方案（也可以使用jQuery）。问题是我在这方面是新手，不知道如何解决这个任务。我感谢所有的帮助。

我的代码:

<ul class="collapsible" id="1">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

 <ul class="collapsible" id="2">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
<button class="btn yellow" id="collapsible-header-green">Change text of all headers ul(id="1")</button>
<button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>

顺晟科技：

1. 常量list1=document.getElementById（“1”）；=>获取第一个列表
2. const button1=document.getElementById（“collapsible-header-green”）；=>获取第一个按钮
3. const elements=list1.getElementsByClassName（“collapsible-header”）；=>获取清单1中的所有可折叠标头
4. 将onClick事件添加到按钮1，当单击事件触发器时，更改元素的文本

代码如下: