0

这是HTML

<div id="projectheader">
Project 1
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>
</div>

<div id="projectheader" style="margin-top: 20px;">
Project2
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>

</div>

我在一个站点上工作，该站点在后端动态创建项目，并将信息插入到前端的项目标头中。因此，同一页面上可能有许多带有 projectheader ID 的 div。我要做的是单击 + div 并向下滑动 projectdrop。这不是页面上只有一个项目的问题，但当页面上有多个项目标头时无法使其正常工作。我希望能够仅向下滑动我单击的特定项目标题。

提前致谢。

4

2 回答 2

2

首先，我强烈建议您纠正重复 ID 问题，因为这不仅是不好的做法，而且会产生这样的问题。看起来projectheader（以及您的大多数其他“ID”）最好用作类，而不是 ID。

但是，如果您只想要一个可行的解决方案，我相信这会成功：

$('.plus').click(function(){
    $(this).parent().next('.projectdrop').slideDown();
}

只需将这些跨度更改为具有 class plus 而不是 id plus。您不能使用一个 ID 选择多个事物。

另请注意，必须使用 DOM 元素的顺序来形成它们之间的关系可能被认为是不好的做法。最好将相关元素包装在一个div或其他适当的元素中，这些元素又附加了一个 ID 或其他标识属性。例如：

<div class="project" id="project1">
    <header>
        Project 1
        <span class="plus">+</span>
    </header>
    <div class="drop">
        <div class="order">
            <header>
                <span class="plus">+</span>
            </header>
            <div class="drop">
            </div>
        </div>
    </div>
</div>
于 2012-11-03T15:33:26.413 回答
1

弄清楚了。

$(document).ready (function() {
$('.plus').on('click', function() {
 $(this).parent().next('.projectdrop').slideToggle('slow');

另一个问题。当 projectdrop 打开时，我如何将 + div 替换为 - ？

谢谢

于 2012-11-03T16:45:57.447 回答