Question

目前该页面仅适用于第一个列表项。我希望onclick show / hide适用于所有列表元素。我尝试将其更改为逐个元素，yag名称，但无法正确使用。

以下是代码：

HTML

<ul>

  <li id="virsraksts" class="slid">
    <h3>{{ post.date | date: "%B %d, %Y" }}: {{ post.title }}</h3>
  </li>
  <div id="kontents" class="storijs">
    <div style="height:20px;"></div>
    {{ post.content }}
    <div style="height:20px;"></div>
  </div>

  <li id="virsraksts" class="slid">
    <h3>{{ post.date | date: "%B %d, %Y" }}: {{ post.title }}</h3>
  </li>
  <div id="kontents" class="storijs">
    <div style="height:20px;"></div>
    {{ post.content }}
    <div style="height:20px;"></div>
  </div>

  <li id="virsraksts" class="slid">
    <h3>{{ post.date | date: "%B %d, %Y" }}: {{ post.title }}</h3>
  </li>
  <div id="kontents" class="storijs">
    <div style="height:20px;"></div>
    {{ post.content }}
    <div style="height:20px;"></div>
  </div>
</ul>

CSS

.storijs {
    display: none;
}

.para {
    display: block;
}

JS

document.getElementById("virsraksts").onclick = function() {
  myFunction()
};

function myFunction() {
  document.getElementById("kontents").classList.toggle("para");
}

Answer 1

您可以使用标记名称或类来选择一些选项。我创建了一个简单的JSFiddle来实现这一目标。

基本上，您可以使用

捕获所有li元素

var elements = document.getElementsByTagName('li')

这将返回所有li元素的数组。接下来，迭代此数组绑定您的单击处理程序。

var elements = document.getElementsByTagName('li')
for(var i=0;i<elements.length;i++)
    elements[i].onclick = myFunction;

现在，点击数组中的每个li元素，即可触发myFunction。最后，您的函数（处理程序）可以使用this关键字将类切换为：

var elements = document.getElementsByTagName('li')
for (var i = 0; i < elements.length; i++)
  elements[i].onclick = myFunction;

function myFunction(e) {
  this.classList.toggle('para');
}

对所有列表元素进行onclick工作

1 个答案: