Question

我有以下HTML代码和JS（coffescript）代码无法正常工作：

JS代码

$(document).ready ->
    $("#description_details").click ->
      $(this).closest('li').next().slideToggle("fast")

HTML代码（简易版）

<ul>
  <li><a href="#" id="description_details">Details</a></li>
  <li id="description_text">some more details</li>
  <li><a href="#" id="description_details">Details</a></li>
  <li id="description_text">some more details</li>
  <li><a href="#" id="description_details">Details</a></li>
  <li id="description_text">some more details</li>
  .
  .
  .
</ul>

CSS / SASS

#description_text
  display: none

我的意图是切换下一个li项目，但它只适用于第一个项目。我无法为li项提供额外的类或唯一标识符。所以我尝试了最近和下一个，但它只适用于第一个。

我也无法在链接所在的li上设置点击事件，因为里面有更多文字。

我会非常感谢任何帮助！

Answer 1

事实证明：您的HTML标记中不能包含多个ID。它是无效的，因此，查询它只会抓住第一次出现。这就是为什么你会遇到你解释的行为。

您需要摆脱这些多个ID值。要么通过类名替换它，要么找到另一种正确查找<{em> / 查询元素的方法。<ul>元素。也许在 css选择器中更具体，例如"#mycontainer ul li a"。

Answer 2

正如@ 97ldave所提到的，你应该有唯一的ID，你不能重复它。

所以将您的ID更改为类，然后您可以使用选择器.description_details

http://jsfiddle.net/habo/pZKqy/1/

slide使用JS转换<li>但没有唯一标识符</li>

2 个答案: