.next（）不适用于所有div

Question

jsFiddle

以上是我的代码的jsFiddle。 注意：CSS是正确的，不需要摆弄。

正如您可能正在查看结果，某些地址前面有一个加号（+）。单击带有加号的最顶部单元格时，您会看到地标文本。但是当你点击其余部分时，它不起作用。 这是我使用的JQuery：

$('#landmark').click(function () {     
    $(this).next('#theLandmark').slideToggle();
});

#landmark为加号（+）符号，其他地标文字为#theLandmark。 HTML / CSS / jQuery工作正常，因为它是第一次使用。 但我觉得还有更多的jQuery代码缺失，可以纠正它。

谢谢！

Answer 1

问题是因为您在元素中重复了landmark和theLandmark id属性。 id在页面中必须是唯一的。如果将它们转换为class属性，则代码可以正常工作：

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

<!-- one example instance... -->
<div class='landmark'>+</div>)
<div class='theLandmark hide'><b id='lmText'>Landmark: </b>Dharmkata</div>

.landmark {
    cursor: pointer;
    display: inline-block;
}
.theLandmark {
    font-size: 12px;
}

Updated fiddle

请注意，#lmtext也会重复，尽管该元素不受JS代码的影响。你也应该把它改成一个类。