隐藏所有子元素的问题 - Problems hiding all children elements

我在创建可折叠元素列表时遇到了一些问题。

我的代码是这样的:

<div class="projectscontainer">
    <span class="item destproject" title="ID: 384">Kaoweuzax-Xrjamjhxteaq</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
            <span class="item srcproject" title="ID: 1991">Eovwurxmpgmz 6.b</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 383">Uxiuhbgbt0.5-Rdsopvxc Fucxbhivs</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 1990">Zekgyfrmc-Tpuduwzr Idkudowbi</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 394">Lyxiyp</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2108">Kdvdz</span><br>
    </div>
</div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2109">Derqi-AA_Boejbvr</span><br>
    </div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2110">Yhdju-SkneLxiyuz</span><br>
    </div>

jQuery:

$(document).ready(function(){
    $(".projectscontainer").click(function(){
      $(this).children('.srcprojects').toggle();
    });
});

PHP:

<?php
$result_rules = $db->query("SELECT rules.source_id, rules.destination_id, dest.project AS dest_project, src.project AS src_project, src.    pk_id as src_id
        FROM dbo.FFC_Rules rules
        INNER JOIN dbo.FFC_Destination dest
            ON dest.pk_id=rules.destination_id
        LEFT JOIN dbo.FFC_Source src
            ON src.pk_id=rules.source_id
        ORDER BY dest.project ASC");
$last_dest = false;
$last_src = false;
while($row = sqlsrv_fetch_array($result_rules)){  
    if ($row['destination_id'] !== $last_dest) {
        $last_dest=$row['destination_id'];
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
        echo    "<div class='srcprojects'>";
        echo        "<div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo        " Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo            "<br>";
    echo        "</div>";
    echo    "</div>";
}
?>

现在它的工作，如果只有一个srcproject在destproject下，但我想要所有的destproject的子项目(srcproject)隐藏当destproject被点击。

我明白，因为每个destproject中只有第一个srcproject是我的标记中的子项目，所以它不起作用。我不知道的是，我怎样才能在我的PHP代码中修复标记，或者改变jQuery，使其工作。

JSFiddle

已解析。我把循环改成这样:

$last_dest = false;
while($row = sqlsrv_fetch_array($result_rules)){  
    if ($row['destination_id'] !== $last_dest) {
        if ($last_dest !== false)
            echo "</div>";
        $last_dest = $row['destination_id'];
        echo "<div class='projectscontainer'>";
        echo    "<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
        echo    "<div class='srcprojects'>";
        echo        "<div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo        " Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo            "<br>";
    echo        "</div>";
}
echo        "</div>";

使用find()

$(document).ready(function(){
    $(".projectscontainer").click(function(){
      $(this).find('.srcprojects').toggle();
    });
});

看起来有一些额外的</div>标签导致问题。我已经删除了它们并更新了jsFiddle。