Question

这是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中。所以可能有很多div在同一页面上有projectheader的ID。我要做的是点击+ div并向下滑动项目滴。这不是页面上只有一个项目的问题，但当页面上有多个项目标题时无法使其正常工作。我希望能够只滑动我点击的特定项目头。

提前致谢。

Answer 1

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

如果您只是想要一个有效的解决方案，我相信这会解决问题：

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

只需将这些跨度更改为具有类加号而不是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>

Answer 2

想出来。

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

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

由于

Jquery帮助滑动div

2 个答案: