MediaWiki 中的可折叠信息框答案

【问题标题】：Collapsible infoboxes in MediaWikiMediaWiki 中的可折叠信息框
【发布时间】：2014-10-03 10:54:06
【问题描述】：

我正在尝试制作类似的东西：http://en.wikipedia.org/wiki/Bible 在右侧，您会看到一个带有“显示”按钮的信息框：

到目前为止，我按照本指南做了什么：http://trog.qgl.org/20140923/setting-up-infobox-templates-in-mediawiki-v1-23/

已下载并安装 Scribuntu
从这个地方复制的 css： https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=edit 到我的 Common.css
导出的信息框模板
导入的信息框模板
创建了信息框模板，它工作正常，但是我不能让我的标题可折叠。

我用谷歌搜索并找到了这个页面http://dev.wikia.com/wiki/CollapsibleInfobox，但没有信息框模板（可折叠）。

有人可以帮我吗？

【问题讨论】：

“不能让我的标题可折叠”是什么意思？圣经信息框有什么作用，而你的 indofox 没有？你有链接吗？
你能看看圣经图片下方的区域，然后你会看到右边带有[显示]链接的标题，当你点击它时——它确实会展开隐藏的内容。希望我解释清楚。
好吧，我很困惑，因为你写了“[...]and it works”。无论如何，很高兴你解决了它
感谢您的关注 :)

标签： php mediawiki mediawiki-templates

【解决方案1】：

通过向信息框添加类解决了我的问题：

{{Infobox
 | abovestyle = background:#cfc;
 | above = Infobox
 | image = [[File:Parents.jpg|300px]]

 |header1 = Header 1
 |rowclass1 = class1 header hidden

 |label2 = 111
 |data2 = test1
 |rowclass2 = class1

 |header3 = Header 3
 |rowclass3  = class3 header hidden

 |label4 = 
 |data4  = data 4
 |rowclass4 = class3
}}

然后我将这个 jQuery 代码添加到我的 Common.js 中：

    $('<a class="infoboxtoggle" href="#">+/-</a>').appendTo(
      $('.infobox tr.header').filter(function(){ return $(this).attr('class').split(" ").length > 1 }).find("th")
    );

    $(".infobox tr.header").each(function(){
      var $this = $(this);

      if( $this.hasClass("hidden") ){
        var firstclass = $this.attr("class").split(" ")[0];
        $this.siblings("." + firstclass).addClass("hidden");
      }
   });

    $('a.infoboxtoggle').click (
      function (infoboxtoggle)
      {
        var parent  = $(this).parent ();
        var grandparent  = parent.parent ();
        var firstclass  = grandparent.attr ('class').split(" ")[0];

        infoboxtoggle.preventDefault();
        grandparent.siblings ('.' + firstclass).has ('td').toggleClass ('hidden');
      }
    );

然后添加一些css：

a.infoboxtoggle { float: right; } /* positions the +/- */
.hidden { display: none; } /* hides hidden rows */
tr.header.hidden { display: table-row; } /* does _not_ hide headers */

然后它起作用了：

当您按下 +/- 时，它会展开隐藏的行。

【讨论】：

【解决方案2】：

你看过http://www.mediawiki.org/wiki/Manual:Collapsible_elements 吗？它解释了如何使任何元素可折叠。

【讨论】：