1

我在创建可折叠元素列表时遇到了一些问题。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中，在打印出所有srcprojects之前添加了结束div标签。我怎样才能解决这个问题？

4

2 回答 2

0

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

<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>";
于 2013-03-19T04:59:00.407 回答
0

我认为您希望隐藏最后一个项目的所有子项，在这种情况下，您必须将 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>

于 2013-03-19T05:16:48.923 回答