向 SharePoint (2013) 列表添加单独运行的展开/折叠按钮答案

【问题标题】：Adding Separately Functioning Expand/Collapse Buttons to SharePoint (2013) Lists向 SharePoint (2013) 列表添加单独运行的展开/折叠按钮
【发布时间】：2021-08-28 15:44:21
【问题描述】：

总编码新手。我想在一个共享点页面上将展开/折叠按钮添加到两个不同的 Web 部件列表。列表在组视图中，因此我希望按钮展开或折叠它们所附加的整个列表。我能够为每个列表提供自己的一组按钮，但这些按钮会激活页面上的两个列表，而不仅仅是它们所附加的列表。

我已经看到了与此相关的答案 (https://sharepoint.stackexchange.com/questions/25107/expand-collapse-all-grouped-items-in-views-of-a-page)，但没有按照我需要的方式运行。任何帮助将不胜感激。

<script type="text/javascript">

    function expandAll() {
        $('img[alt="expand"]').click();
    }

    function collapseAll() {
        $('img[alt="collapse"]').click();
    }

    var expandButton = "<a href='#' onClick="

    +'"' + "this.href='javascript:expandAll()'"

    + '">&nbsp;<img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif">Expand List</a>';

    var collapseButton = "<a href='#' onClick="

    +'"' + "this.href='javascript:collapseAll()'"

    + '">&nbsp;<img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif">Collapse List</a>';

    $(document).ready(function () {
        $("#WebPartWPQ2").prepend(expandButton).prepend(collapseButton);
        $("#WebPartWPQ3").prepend(expandButton).prepend(collapseButton);
    });
</script>

【问题讨论】：

标签： javascript list button sharepoint-2013 web-parts

【解决方案1】：

我能够弄清楚这一点，尽管我确信这段代码可以用 if 语句/选择器来整理。这是我想出的：

<script type="text/javascript">

    function expandAll1() {
        $("#MSOZoneCell_WebPartWPQ2").find('img[alt="expand"]').click();
    }

    function collapseAll1() {
        $("#MSOZoneCell_WebPartWPQ2").find('img[alt="collapse"]').click();
    }

    function expandAll2() {
        $("#MSOZoneCell_WebPartWPQ3").find('img[alt="expand"]').click();
    }

    function collapseAll2() {
        $("#MSOZoneCell_WebPartWPQ3").find('img[alt="collapse"]').click();
    }

    var expandButton1 = "<a href='#' onClick="

    +'"' + "this.href='javascript:expandAll1()'"

    + '">&nbsp;<img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif">Expand List</a>';

    var collapseButton1 = "<a href='#' onClick="

    +'"' + "this.href='javascript:collapseAll1()'"

    + '">&nbsp;<img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif">Collapse List</a>';

    var expandButton2 = "<a href='#' onClick="

    +'"' + "this.href='javascript:expandAll2()'"

    + '">&nbsp;<img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif">Expand List</a>';

    var collapseButton2 = "<a href='#' onClick="

    +'"' + "this.href='javascript:collapseAll2()'"

    + '">&nbsp;<img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif">Collapse List</a>';
    $(document).ready(function () {
        $("#MSOZoneCell_WebPartWPQ2").prepend(expandButton1).prepend(collapseButton1);
        $("#MSOZoneCell_WebPartWPQ3").prepend(expandButton2).prepend(collapseButton2);
    });
</script>

【讨论】：