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）您在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

Answer 2

id是唯一属性，只能分配给一个元素。每当你试图获得elementbyid时，它将只获得第一个li。尝试使用Class。

Answer 3

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

点击任何<li>元素

3 个答案: