Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQuery展开/折叠嵌套div

Javascript 如何使用jQuery展开/折叠嵌套div

javascript jquery razor asp.net-core-mvc

Javascript 如何使用jQuery展开/折叠嵌套div,javascript,jquery,razor,asp.net-core-mvc,Javascript,Jquery,Razor,Asp.net Core Mvc,我有一个使用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">&

我有一个使用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>
这非常简单，可以使第一层展开和折叠

但是现在我需要在扩展的div中嵌套3个新显示的div来进行每个扩展

这是我编写的jQuery，目的是尝试扩展内部div

// 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^=“expandRecommensions”]”）； 我得到的所有I标签都有一个字体很棒的类（+圆圈中的符号）作为展开按钮

现在，我滚动expandNodes集合中的每个“+in a circle”按钮，并通过服务器端的razor building获得分配给每个按钮的唯一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>


为销售点和责任经理分配推荐任务（3）
测试结果1
testOCFOFinding1
Testoigall建议
我想出来了

以下是修订后的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。我需要第二次引用I标记，使用字体awesome+类作为按钮来连接单击事件

一次提示。我尝试为两个节点id引用创建一个var，并使用它们以使其更具可读性。但是，该级别上所有三个加号的单击事件都显示相同的div。最后一个div。因此，我必须在create_expand_toggle函数中连接id。

如果您可以仅添加html部分而不是服务器端，这将有帮助p从查看源代码部分排除故障或复制html，克里特岛一个可能有2到3层的演示Shi Muhammad，我在上面发布了html源代码。那很好，你能添加用于此部分的特定CSS吗？这将帮助我更快地对脚本排序，因为布局可以正常工作，而且脚本可以更容易地进行研究Hey Muham疯了，答案已经贴出来了。是的，我看到了，所以没有回答好，所以你自己解决了：） 
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.

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

        // 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();
            });
        }