Question

我有兴趣了解是否可以同时扩展网页上所有可折叠部分。我正在查看的网页上的相关部分如下所示：

.ajaxComplete()

如上所示，通过单击<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链接，而我想为此做很多这样的网页。

任何对此的想法将不胜感激。我需要一种非常简单的方法来执行此操作，因为我不太了解Web编程。只知道非常基本的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扩展一个“ expand”类之类的东西，以及像“ collapsed”之类的将元素高度设置为0的类（否则，折叠元素。）

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

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

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

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

另一种方法是使用类似Bootstrap的库，Bootstrap具有可爱的折叠机制。

Answer 3

因此，您想在不受您控制的网站上使用它吗？然后，您首先只能将自己的JavaScript代码插入其中。如果目标站点无法通过CSP阻止访问，则可以通过浏览器控制台或“书签”运行。

如果这里的目的只是获取HTML中的“原始数据”，那么最好的选择就是完全禁用浏览器中的样式-这样也会覆盖style="display:none;"之类的内联内容，以便一切从一开始就应该可见。

正如您在评论中所述，https://superuser.com/questions/447269/is-there-any-way-to-view-a-webpage-without-styles-in-chrome导致了uMatrix browser extension，因此，如果这符合您的目的-完美;-）

Answer 4

我遇到了同样的问题，我想自动扩展Arxiv上的所有抽象部分。使用Chrome开发者控制台，我发现它的工作原理与我想要的完全一样：

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

因为“抽象完全”类没有显示：

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

4 个答案: