如何使用jQuery擴展/折疊嵌套的div

Question

我有使用jQuery的展開/折疊功能，在第一個級別上效果很好：

這是我的剃刀文件：

@model IntDashMakeRecAssgnmntsPoRespMngrVM

<div style="border:1px dotted blue;padding:5px">
    <div>
        <i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
    </div>
    <i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
    <i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
    <span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (@Model.Audits.Count())</span>
    <div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
        @foreach (var audit in Model.Audits)
        {
        <div>
            <i id="expandRecommendations@(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations@(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>@audit.AuditAcnCd</b></span>
            <div id="RecommendationDiv@(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
            @foreach(var finding in audit.Findings)
            {
                foreach(var rec in finding.Recommendations)
                {
                    <div style="display:none;">
                    <a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="@rec.RecommendationId"
                       title="Make assignment for @audit.AuditAcnCd">
                        <b>@audit.AuditAcnCd/@finding.FindingCd/@rec.RecCd</b>
                    </a>
                    </div>
                }
            }
            </div>
        </div>
        }
    </div>
</div>

這是我的jQuery：

$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
            $("#MakeRecommendationAssignmentsDiv").toggle();
            $("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
        });

使第一級展開和折疊非常簡單。

但是現在我需要在擴展div中為每個擴展添加嵌套的3個新顯示的div。

這是我正在嘗試擴展內部div的jQuery。

// Wire up dynamic toggle
        var expandNodes = $('i[id^="expandRecommendations"]');
        expandNodes.each(function (index) {
            console.log(this.id);
            console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
            expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
            expandNodeDivId = "RecommendationDiv" + expandNodeId;
            console.log("#" + expandNodeDivId)
            $("#" + expandNodeDivId).click(function (e) {
                $("#" + expandNodeDivId).toggle();
            });
         });

在這一行：var expandNodes = $（'i [id ^ =“ expandRecommendations”]'）; 我正在將所有具有字體超贊類（加號的圓圈）用作擴展按鈕的i標簽。

現在，我瀏覽一下expandNodes集合中的每個“ +圓圈”按鈕，並使用服務器端的剃刀構建為我分配給它們的唯一ID（

<div id="RecommendationDiv@(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">

並嘗試向每個事件添加一個click事件以切換自身，該事件應顯示自身以及嵌套在其內部的錨點div：

但這不會擴展。

這是console.logs，顯示我正在獲取正確的ID來調用要擴展的元素：

這些console.log行顯示了我正在獲取寫信息以嘗試將其連接起來，但我只是無法使它們擴展：

expandRecommendations279938 // the div I clicked on

279938 // able to parse the audit id from the id of the element I clicked on.

#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.

有人在這里看到問題嗎？ 任何幫助將不勝感激。

更新1

這是從服務器端生成的HTML源代碼。

<div style="border:1px dotted blue;padding:5px">
    <div>
        <i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
    </div>
    <i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
    <i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
    <span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
    <div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
        <div>
            <i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>testOIGFinding1</b></span>
            <div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
                        <b>testOIGFinding1/4/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
                        <b>testOIGFinding1/4/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
                        <b>testOIGFinding1/7/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
                        <b>testOIGFinding1/7/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
                        <b>testOIGFinding1/7/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
                        <b>testOIGFinding1/7/4</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
                        <b>testOIGFinding1/7/5</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
                        <b>testOIGFinding1/7/6</b>
                    </a>
                    </div>
            </div>
        </div>
        <div>
            <i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>testOCFOFinding1</b></span>
            <div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
                        <b>testOCFOFinding1/1/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
                        <b>testOCFOFinding1/1/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
                        <b>testOCFOFinding1/1/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
                        <b>testOCFOFinding1/1/4</b>
                    </a>
                    </div>
            </div>
        </div>
        <div>
            <i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
            <div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
                        <b>TestOigAllRecommendations/1/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
                        <b>TestOigAllRecommendations/1/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
                        <b>TestOigAllRecommendations/1/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
                        <b>TestOigAllRecommendations/2/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
                        <b>TestOigAllRecommendations/2/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
                        <b>TestOigAllRecommendations/2/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
                        <b>TestOigAllRecommendations/3/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
                        <b>TestOigAllRecommendations/3/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
                        <b>TestOigAllRecommendations/3/3</b>
                    </a>
                    </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我想到了。

這是修改后的JavaScript：

        // Wire up dynamic toggle
        var expandNodes = $('i[id^="expandRecommendations"]');
        expandNodes.each(function (index) {
            expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
            create_expand_toggle(expandNodeId);
         });

        function create_expand_toggle(nodeId) {
            $("#" + "expandRecommendations" + nodeId).click(function (e) {
                console.log("Clicking");
                $("#" + "RecommendationDiv" + nodeId).toggle();
            });
        }

我指的是單擊按鈕時要擴展的同一div。 我需要使用字體真棒+類作為對鈎住click事件的按鈕，再次引用i標簽。

一旦提示。 我試圖為兩個節點ID引用創建一個var並使用它們，以便更具可讀性。 但是，該級別上所有三個加號的click事件都顯示相同的div。 最后一格 因此，我必須在create_expand_toggle函數中連接ID。