Question

在我的MediaWiki页面上，我试图创建一个折叠div的锚点链接，这样当我点击它时，它会跳转到该div并自动展开。我可以锚定到标题（＆＃34;我如何......＆＃34;）并且它跳转到它但是当我点击链接时不会展开折叠的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中放置一个锚并链接到它，但这没有任何效果。

Answer 1

好吧，您可以尝试使用:active pseudo selector指定可见状态。问题是：1）浏览器支持不是普遍的; 2）它依赖于window.location来设置active状态;如果你只是点击要扩展的标题，那么在任何情况下你都必须使用不同的解决方案。

更通用的解决方案是，您必须删除“崩溃的”错误消息。使用JavaScript点击课程。但是，您的MW安装支持自定义JS的能力可能会有所不同。

Answer 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，基于它是“show”div还是“hide”div。我还有2个“隐藏”链接，一个在顶部，一个在底部，如果中间的项目足够多，以便顶部的“隐藏”可以在屏幕上滚动。

<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中拥有你想要的任何东西。子弹列表，有序列表，图像，甚至是同一页面上其他“答案”的目标。

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

希望这有助于某人。

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

2 个答案: