Кнопка разворачивания исчезнет при свертывании

Question

У меня есть код ниже, в каждом ряду которого есть кнопка, выполняющая две функции: они развернуты и свернуты в той конкретной строке, где находится кнопка.

<div class="">
    <ul>
        <li
          ng-repeat="nav in ciRelationshipHierarchyBySection track by $index"
          style="background:none; padding:0 10px;margin:5px;"
          class="nav nav-list panel-collapse collapse in"
          id="networkDevicesCollapsePanel_{{$index}}"
        >
            <div
              ng-show="ciAttributesCount"
              id="collapsebutton_{{$index}}"
              data-toggle="collapse"
              data-target="#networkDevicesCollapsePanel_{{$index}}"
              class="nodisp expandcollapse no-print">
                <i class="glyphicon glyphicon-minus"></i>Collapse/expand
            </div>
            <a
              style="cursor:pointer; padding: 2px 12px;"
              ng-click="showNetworkDevices(nav.IdentificationSourceId)">
                {{nav.IdentifySourceName}}
            </a>
            <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
            <br />
            <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
            <br />
            <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
            <br />
        </li>
    </ul>
</div>

Моя проблема заключается в том, чтокнопка находится в той же строке, кнопка также будет свернута и не станет видимой для раскрытия.

Как решить эту проблему?

События нажатия кнопки, показанные ниже:

$("#expandbutton1").hide();

        $("#expandbutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
            $("#expandbutton1").hide();
            $("#collapsebutton1").show();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            });
        });

        $("#collapsebutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').removeClass('in');
            $("#expandbutton1").show();
            $("#collapsebutton1").hide();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
            });
        });
    });

Answer 1

рассмотрите возможность вставки складной панели во внутренние дочерние элементы тега li:

<ul>
    <!-- remove anything make the li collapsible -->
    <li
      ng-repeat="nav in ciRelationshipHierarchyBySection track by $index"
      style="background:none; padding:0 10px;margin:5px;"
      class="nav nav-list"
    >
        <div
          ng-show="ciAttributesCount"
          id="collapsebutton_{{$index}}"
          data-toggle="collapse"
          data-target="#networkDevicesCollapsePanel_{{$index}}"
          class="nodisp expandcollapse no-print">
            <i class="glyphicon glyphicon-minus"></i>Collapse/expand
        </div>
        <!-- new collapsible tag inside the li -->
        <div
          class="panel-collapse collapse in"
          id="networkDevicesCollapsePanel_{{$index}}"
        >
            <a
              style="cursor:pointer; padding: 2px 12px;"
              ng-click="showNetworkDevices(nav.IdentificationSourceId)">
                {{nav.IdentifySourceName}}
            </a>
            <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
            <br />
            <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
            <br />
            <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
            <br />
        </div>
    </li>
</ul>