Как развернуть / свернуть вложенный div с помощью jQuery - PullRequest
Новая
       12

Как развернуть / свернуть вложенный div с помощью jQuery

0 голосов
/ 12 мая 2018

У меня есть разворачивание / свертывание с использованием jQuery, который отлично работает на первом уровне:

enter image description here

Это мой файл бритвы: 

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

Это очень просто - развернуть и свернуть первый уровень.

Но теперь мне нужны вложенные 3 недавно показанных элемента div врасширенный 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 ^= "expandRecommendations"] ');Я получаю все свои теги i с классом шрифтов (+ знак в кружке), действующим как кнопка расширения.

Теперь я пролистываю каждую из кнопок "+ в кружке" в узлах расширения.собрать и получить уникальный идентификатор, который я назначил каждому из них с помощью сборки бритвы на стороне сервера (

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

и попытаться добавить событие щелчка для каждого из них, чтобы переключить себя, которое должно показать себя и div якорявложенный внутрь себя:

Но он просто не будет расширяться.

Вот примеры console.logs, показывающие, что я получаю правильные идентификаторы для вызова элемента для расширения:

enter image description here

Эти строки 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>

1 Ответ

0 голосов
/ 13 мая 2018

Я понял.

enter image description here

Вот исправленный 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 с классом font awesome +, выступающим в качестве кнопки для подключения события click.

Once tip.Я попытался создать переменную для двух ссылок на идентификаторы узлов и использовать их, чтобы они были более читабельными.Но затем событие щелчка для всех трех плюсов на этом уровне показывает один и тот же div.Последний див.Поэтому мне нужно объединить идентификаторы в функции create_expand_toggle.

...