单击任何 <li> 元素时显示答案

【问题标题】：Show when clicked on any of <li> elements单击任何 <li> 元素时显示
【发布时间】：2017-02-06 10:04:55
【问题描述】：

我有一个页面，其中包含不同的 <li> 元素，它们下面有内容。内容是隐藏的，这意味着当您单击<li> 元素时，它下面的内容被隐藏，向下滑动并显示出来。我尝试了不同的方法，但目前都没有达到预期效果。

这是一个 JSFiddle，其中只有第一个元素有效，但我需要它用于所有元素，如果可能的话，还有幻灯片效果。谢谢。

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>

CSS

.storijs {
  display: none;
}

.para {
  display: block;
}

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

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

【问题讨论】：

你不能有重复的ID
去上课
你的意思是这样jsfiddle.net/mmLvs1za/3？

标签： javascript jquery html css list

【解决方案1】：

代码中的几个问题：

1) 您使用了重复的 ID。 ID 必须是唯一的。 getElementById 仅选择具有该 ID 的第一个元素。

2) 您在ul 中添加了 div 作为子元素。这使标记无效。你应该把那个 div 元素放在 li 中。

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

解决方案：

使用 classname(slid) 来定位这些元素，因为它们具有公共类。并以相关的.kontents 元素为目标，使用.next() 选择器作为.slid 的直接下一个兄弟元素进行遍历：

$('.slid').click(function(){
   $(this).next().slideToggle();
});

Working Demo

【讨论】：

如果事件被绑定这样会不会更好：$('ul').on('click', 'li.slid', function() {... 在动态帖子的情况下？不知道是不是这样..
是的，仅当动态添加元素时。然而，OP 没有分享任何与此相关的内容。因此我已经声明了静态事件绑定。
谢谢，这正是我需要的！对其进行了一些编辑，并像魅力一样工作。 jsfiddle.net/hcdnm2g2/1

【解决方案2】：

在您的 html 代码中，您在 <li> 标记中使用了 ID。 ID 应该是唯一的。如果您使用不同的 id 名称，它将起作用

【讨论】：

【解决方案3】：

Id 是唯一属性，只能分配给一个元素。每次您尝试getElementById 时，它只会获得第一个 LI。尝试使用类。

【讨论】：