0

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

我的代码如下所示：

<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）。

我知道，由于每个 destproject 中的第一个 srcproject 是我的标记中的子项，因此它不起作用。我不知道的是，我怎样才能修复我的 PHP 代码中的标记，或者更改 jQuery 以使其正常工作。

JSFiddle

4

2 回答 2

2

解决。我将循环更改为如下所示：

$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>";
于 2013-03-19T17:31:15.293 回答
1

使用find().

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

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

于 2013-03-19T01:47:53.983 回答