关于滑动div的Jquery帮助

这是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>

项目1
+
+
项目2
+
+

我在一个网站上工作，那里的项目是在后端动态创建的，信息是插入前端的projectheader中的。因此，同一页上可能有许多ID为projectheader的div。 我想做的是单击+div并向下滑动projectdrop。如果页面上只有一个项目，但当页面上有多个projectheader时无法使其工作，则这不是问题。我希望能够只向下滑动我单击的特定项目标题

---

提前感谢。

首先，我强烈建议您纠正重复ID问题，因为这不仅是一种不好的做法，而且会产生类似这样的问题。似乎

projectheader

（以及大多数其他“ID”）更适合用作类，而不是ID

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

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

只需将这些跨度更改为类加号而不是id加号。不能使用一个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>

项目1
+
+

首先，我强烈建议您纠正重复ID问题，因为这不仅是一种不好的做法，而且会产生类似这样的问题。似乎

projectheader

（以及大多数其他“ID”）更适合用作类，而不是ID

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

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

只需将这些跨度更改为类加号而不是id加号。不能使用一个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>

项目1
+
+

找到了答案

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

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

谢谢

把它弄明白了

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

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

---

谢谢

ID应该是唯一的。您是否考虑过某种javascript库，即jquery？jQueryUI有一个很好的选项卡式小部件，看起来它可以做您想要的事情。如果您想在自己的javasscript中自己完成，至少可以查看jQueryUI选项卡的演示，它可能会给您一些好的想法。它将说明前面的评论中关于ID唯一性的内容。ID应该是唯一的。您是否考虑过某种javascript库，例如jquery？jQueryUI有一个很好的选项卡式小部件，看起来它可以做您想要的事情。如果您想在自己的javasscript中自己完成，至少可以查看jQueryUI选项卡的演示，它可能会给您一些好的想法。它将说明前面的注释中关于ID唯一性的内容。$（“#plus”）.click（）仅适用于第一个匹配的元素。我可以在“小样本”代码中数到4。所以，正如您所建议的，id应该替换为类。当您使用id时，将所有id转换为类。它们都应该是类。$（'#plus'）。click（）仅适用于第一个匹配的元素。我可以在“小样本”代码中数到4。所以，正如您所建议的，id应该替换为类。当您使用id时，将所有id转换为类。它们都应该是类。您需要

.html（）

方法。将div更改为-run

$（'.plus'）.html（'-'）我也意识到我之前的答案是不正确的，你的HTML由于缺乏缩进而令人困惑。我认为应该修改DOM结构，因为它不太符合层次结构。但是，您的解决方案是正确的。我现在就修我的。你需要
.html（）
方法。将div更改为-run
$（'.plus'）.html（'-'）我也意识到我之前的答案是不正确的，你的HTML由于缺乏缩进而令人困惑。我认为应该修改DOM结构，因为它不太符合层次结构。但是，您的解决方案是正确的。我现在就修我的。