MediaWiki 页面：链接到折叠 div 内的锚点？答案

【问题标题】：MediaWiki page: Linking to an anchor inside collapsed div?MediaWiki 页面：链接到折叠 div 内的锚点？
【发布时间】：2018-04-04 02:58:32
【问题描述】：

在我的 MediaWiki 页面上，我正在尝试创建一个指向折叠 div 的锚链接，以便当我单击它时，它会跳转到该 div 并自动展开它。我可以很好地锚定标题（“我如何...”），它会跳转到该标题，但当我单击链接时不会展开折叠的 div。

<div class="mw-collapsible mw-collapsed" style="width: 750px;border: 1px solid;
     border-radius: 10px;padding: 0px 5px 0px 5px;margin: 1px">
====How do I...====
<div class="mw-collapsible-content">
This is how you do blah blah blah...<br \>
</div>
</div>

我尝试在折叠的内容 div 中放置一个锚点并链接到它，但这没有效果。

【问题讨论】：

标签： html mediawiki

【解决方案1】：

好吧，您可以尝试使用:active pseudo selector 指定可见状态。这样做的问题是：1）浏览器支持不是普遍的； 2) 它依赖 window.location 来设置active 状态；如果您只是单击标题来展开，则无论如何您都必须使用不同的解决方案。

更通用的解决方案是，您必须使用 JavaScript 在点击时删除“mw-collapsed”类。但是，您的 MW 安装支持自定义 JS 的能力可能会有所不同。

【讨论】：

好吧，你的建议让我陷入了 CSS 的兔子洞（因为我不能在这个 Mediawiki 页面上使用 JS）。我可以使用 :active 伪类，如果它在 IE 中工作的话。我可以让 :hover 在 IE 中正常工作，但不能 :active。 :active 如果我在 Chrome 中尝试它，它可以工作。感谢您的帮助。看来我必须朝着与我希望的方向不同的方向发展。

【解决方案2】：

自从我发布这个问题以来已经有一段时间了，我确实想出了一种方法来做我想做的事情，并让它完全基于 HTML 和 CSS（无 Javascript）。它有点 hacky，但它适用于我测试过的所有 4 种浏览器（IE、Chrome、Firefox 和 Opera），也适用于 iOS 和 Android 移动设备。

首先，我的 MediaWiki:Common.css 页面上有这个 CSS。

@-webkit-keyframes fadeIn {
from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes fadeIn {
from { opacity: 0 }
  to { opacity: 1 }
}

.answer {
height:0;
width:auto;
margin: 1px;
overflow: hidden;
padding: 0 18px;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
}

.linkshow:target * .answer {
display: block;
-webkit-animation: fadeIn 1.5s;
animation: fadeIn 1.5s;
height: auto;
padding: 24px 18px;
border: 1px solid;
border-radius: 10px;
}

.linkhide:target * .answer {display: none;}

在我的 HTML 中，我有这些 div 结构。每个结构都有不同的 id，具体取决于它是“显示”div 还是“隐藏”div。我还有两个“隐藏”链接，一个在顶部，一个在底部，如果中间的项目足够多，以至于顶部的“隐藏”可以滚出屏幕。

<div class="linkshow" id="SUBJECT1linkshow">
<div class="linkhide" id="SUBJECT1linkhide">
<div>[[#SUBJECT1linkshow|How do I Blah, Blah, Blah, etc.?]]</div>
<div class="answer">
<div style="float: right;">[[#SUBJECT1linkhide|Hide]]</div>
<br \>
To do blah, blah, blah...:

*Do this step.<br \>
*Do this next.<br \>
*Once you've done that, do this.<br \>
*etc. etc. etc..<br \>

<div style="float: right;">[[#SUBJECT1linkhide|Hide]]</div>
</div>
</div>
</div>

<div class="linkshow" id="SUBJECT2linkshow">
<div class="linkhide" id="SUBJECT2linkhide">
<div>[[#SUBJECT2linkshow|Can I change my Blah, Blah, Blah, etc.?]]</div>
<div class="answer">
<div style="float: right;">[[#SUBJECT2linkhide|Hide]]</div>
<br \>
To change your blah, blah, blah...:

*Do this step.<br \>
*Do this next.<br \>
*Click the "Edit" button.[[File:My_Screenshot.png|none]]<br \>

'''''Note:  Before these changes will take effect, you must et. etc. [[#SUBJECT3linkshow|Do that thing]].'''''<br \>

<div style="float: right;">[[#SUBJECT2linkhide|Hide]]</div>
</div>
</div>
</div>

你可以在内部 div 中拥有任何你想要的东西。项目符号列表、有序列表、图像，甚至指向同一页面上的其他“答案”。

页面首次显示时，所有答案都会折叠起来，您只会看到一个问题列表。单击一个将触发向展开状态的过渡，答案周围有一个漂亮的边框。单击“隐藏”将折叠，或者单击另一个问题将折叠当前打开的答案并展开新答案。

希望这对某人有所帮助。

【讨论】：