Блог

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

 <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");
            });
        });
    });
  

рассмотрите возможность вставки сворачиваемой панели во внутренние дочерние элементы 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>