折叠时展开按钮消失答案

【问题标题】：Expand button dissapear while collapse折叠时展开按钮消失
【发布时间】：2019-08-20 04:05:06
【问题描述】：

我有下面的代码，每行都有一个按钮，它有两个功能，它们是按钮所在的特定行的展开和折叠。

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

【问题讨论】：

标签： html css angularjs user-interface

【解决方案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>

【讨论】：