Question

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

我的代码如下所示：

<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>";
}
?>

现在，如果destproject下只有1个srcproject，它可以正常工作，但我希望在点击destproject时隐藏destproject的所有子项（srcproject）。

在第三个projectscontainer div中，在打印出所有srcproject之前添加结束div标记。我该如何解决这个问题？

Answer 1

你的循环中有一些奇怪的东西。你正在开放

<div class='projectscontainer'>

在这种情况下

if ($row['destination_id'] !== $last_dest) {

但是你没有在相同条件下关闭<div>，你在任何条件下都关闭了<div>。我认为生成的HTML格式不正确，您的浏览器会尽力修复它（徒劳）。

尝试：

// Initialize the last dest
$last_dest = false;

// Loop on each result
while($row = sqlsrv_fetch_array($result_rules)) {

    // Check if the section is changing or if we are at the begining
    if ($row['destination_id'] !== $last_dest || $last_dest === false) {

        // Close the previous projectscontainer tag if we are not at the begining of the process
        if ($last_dest !== false)
            echo "</div>";

        // Update the last dest
        $last_dest = $row['destination_id'];

        // Open the new projectscontainer 
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }

    // Print the sub block
    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>";
}

// At the end at the process, close the last projectscontainer
echo "</div>";

Answer 2

我认为您希望隐藏上一个项目中的所有孩子，在这种情况下，您必须将HTML内容更改为

    <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 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>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Fcnlw-YTR-Orzqksr</span>
    <br>
</div>

<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Awhsa-DT</span>
    <br>
</div>

<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Kxqda-WuxkorctkwmWlioamud</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Jnlps-NcsgfdlbpzaAhdthi</span>
    <br>

</div>

循环生成的HTML问题

2 个答案: