展开网页上的所有可折叠部分

Question

我很想知道是否有办法同时展开网页上的所有可折叠部分。我正在查看的网页上的相关部分如下所示：

<tr>
    <td></td>
    <td style="..;">
        <div style="..">
            <span id=".." style="display:inline;"><br />
                <div style="display:inline"> ... 
                </div>
            </span>
            <span id="toHide1234" style="display:none;"><br />
                <div style="display:inline">
                    <p>.....</p>
                </div>
            </span>
            <a id="expcoll1234" href="JavaScript:expandcollapse('expcoll1234',1234)">
                expand
            </a>
        </div>
    </td>
</tr>

如上所示，通过单击 expand link，此部分将展开。麻烦的是，我感兴趣的网页上有成百上千个这样的expand link，我想为之做的这样的网页也有很多。

如有任何想法，我们将不胜感激。我需要一种非常简单的方法来执行此操作，因为我不太精通网络编程。只知道很初级HTML。

Answer 1

假设所有隐藏部分的 ID 格式为 "toHide" + some numbers，您可以在页面上找到所有 <span> 元素并按 ID 过滤它们并更改 display 样式：

Array.from(document.getElementsByTagName('span'))
     .filter(span => span.id.startsWith('toHide'))
     .forEach(span => { span.style.display = ''; });

Answer 2

您可以使用 jQuery 来执行此操作。

首先，您可能希望为每个扩展的 div 提供一个“扩展”class 或类似的东西，以及设置高度的 class 之类的“折叠”元素的大小为 0（或者您正在折叠元素。）

<div class=“expand collapsed …”>
…
</div>
<div class=“expand collapsed…”>
…
</div>

然后您可以同时 select 所有这些 <div> 并删除折叠的 class，如下所示：

$(‘.expand’).removeClass(‘collapsed’);

您可以将该行粘贴到一个函数中，并通过将按钮的 onClick 属性设置为函数名称来在按下按钮时调用该函数。

另一种方法是使用像 Bootstrap 这样的库——Bootstrap 有一个可爱的折叠机制。

Answer 3

所以你想在不受你控制的网站上使用它？然后，您首先将自己的 JavaScript 代码插入其中的可能性受到限制。如果目标站点不通过 CSP 阻止它，它也许可以从浏览器控制台或“书签”工作。

如果只是获取 HTML 中存在的“原始数据”就是此处的 objective，那么您最好的选择可能是完全禁用浏览器中的样式 - 这会覆盖内联内容，例如style="display:none;" 也一样，所以一切都应该从一开始就可见。

正如您在评论中所说，https://superuser.com/questions/447269/is-there-any-way-to-view-a-webpage-without-styles-in-chrome led to uMatrix browser extension，所以如果这对您的目的有效 - 完美 ;-)

Answer 4

我遇到了同样的问题，我想自动扩展 Arxiv 上的所有摘要部分。使用 Chrome 开发控制台，我发现这完全符合我的要求：

('.abstract-full').css('display','inline')

由于 "abstract-full" class 显示：none.

展开网页上的所有可折叠部分

Expanding all collapsible sections on a web page

html

javascript

css

webpage