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

Question

我有一个页面，其中包含不同的<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;
}

.JS

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

Answer 1

代码中的几个问题：

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

2(您已将div添加为ul中的子元素。这使得标记无效。你应该把这个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();
});

工作演示

Answer 2

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

Answer 3

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