0

我有以下 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在链接所在的地方设置点击事件，因为里面有更多的文字。

我将非常感谢任何帮助！

4

2 回答 2

1

硬道理：您的 HTML 标记中不能有多个 ID。它是无效的，因此，查询它只会抓住第一次出现。这就是为什么您会遇到您所解释的行为。

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

于 2013-04-30T13:52:27.503 回答
0

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

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

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

于 2013-04-30T13:52:11.310 回答