模板:Toggle2

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
貢獻者:

與原模板基本相同,僅去掉了clear:both。用於帶有右側信息模板的頁面。

Template-info.svg 模板文檔  [查看] [] [歷史] [刷新]

類似{{Hide}}的功能。不同於{{Hide}}只能按鍵展開摺疊,本模板展開的響應範圍是整段文字和圖片。

用法

{{Toggle
|button= 
|content= 
}}
  • 使用該模板時最好有註明能展開的提示

範例

{{Toggle
|button= 上方內容
|content= 隱藏內容
}}

你可以點擊下面文字來看到隱藏信息。

上方內容

多個使用

{{Toggle
|button= '''メルト'''
|content= {{BilibiliVideo|id=188136|page=3}}
}}
----
{{Toggle
|button= '''メルト2M MIX'''
|content= {{BilibiliVideo|id=39890}}
}}

你可以點擊下面文字來看到隱藏信息。

メルト

メルト2M MIX

使用圖片

{{Toggle
|button= [[File:18077635 big p2.jpg|200px]]
|content= Illustration by {{lj|倉澤もこ}}
}}

你可以點擊下面圖片來看到隱藏信息。

18077635 big p2.jpg

內容中含有標題時

{{#vardefine:toggle_id|{{#expr:{{#var:toggle_id|0}}+1}}}}<div class="mw-customtoggle-{{#var:toggle_id}}" style="cursor:pointer">上方內容</div>
<div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:toggle_id}}">
== 含有標題的隱藏內容 ==
</div>

當隱藏內容中含有標題時,應當把要隱藏的內容放置在以上HTML代碼中</div>的上方來實現該功能,以確保標題的正常顯示。

為了避免在內容頁面中使用var,可去除{{#vardefine:toggle_id}},並將{{#var:toggle_id}}替換成不會造成id重複的其他內容(非純數字即可)。

<div class="mw-customtoggle-hidden_content_with_title" style="cursor:pointer">上方內容</div>
<div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-hidden_content_with_title">
== 含有標題的隱藏內容 ==
</div>
上方內容

  • 注意:直接使用此模板時,標題後方將不會自動添加編輯按鈕,請通過{{Edit}}手動添加對應按鈕。
上方內容


未發現編輯按鈕的原因是本模板頁面有編輯保護,不會自動添加編輯按鈕。請通過說明文檔原頁面查看正常視圖。點擊跳轉

請注意,所有包含在模板內的標題都會出現這種情況,所以應儘量避免在模板內使用標題。

與infobox兼容

默認button與content之間會有一個{{clear}},這可能導致toggle與infobox等浮動元素兼容性較差。可以通過傳入noclear參數覆蓋。

{{Toggle
|button=按鈕
|content=文字
|noclear=true
}}
{{clear}}
這是一個很長的浮動元素,例如infobox
按鈕

對比不傳入noclear的版本:

這是一個很長的浮動元素,例如infobox
按鈕

存在多個按鈕和受控內容的情形

可使用自定義標籤,指定用於控制顯示的按鈕和受到控制的頁面。同一標籤下的不同按鈕,都會控制同一標籤下不同位置的內容。

  • 此處自定義標籤:ToggleDoc_多個按鈕和內容
  1. 這裡存在三個按鈕,這三個按鈕都會控制下方內容的展示情況,你也可以<span class="mw-customtoggle-ToggleDoc_多個按鈕和內容" style="cursor:pointer; display:inline-block;" title="點我試試">{{Keypress|點我試試}}</span>。
  2. <div class="mw-ui-button mw-customtoggle-ToggleDoc_多個按鈕和內容"
  3. style="cursor:pointer;display:inline-block;" title="按鈕1">按鈕1</div>
  4. <div class="mw-ui-button mw-ui-progressive mw-customtoggle-ToggleDoc_多個按鈕和內容"
  5. style="cursor:pointer;display:inline-block;" title="按鈕2">按鈕2</div>
  6. <div class="mw-ui-button mw-ui-destructive mw-customtoggle-ToggleDoc_多個按鈕和內容"
  7. style="cursor:pointer;display:inline-block;" title="按鈕3">按鈕3</div>
  8. <hr/>
  9. 這是第一行。
  10. <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多個按鈕和內容">這是隱藏的第二行。</div>
  11. 這是第三行。
  12. <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多個按鈕和內容">這是隱藏的第四行。</div>
  13. 這是第五行。

這裡存在三個按鈕,這三個按鈕都會控制下方內容的展示情況,你也可以點我試試

按鈕1
按鈕2
按鈕3

這是第一行。

這是第三行。

這是第五行。

衍生

  • {{Toggle pic}},為使用圖片而設計,可以調整佔據的空間。
  • {{Toggle pics}},方便大量使用圖片而設計。
  • {{ToggleInline}},可使button與content處在同一行
  • {{Toggle2}},去除了clear:both
此頁面最後編輯於 2022年1月17日 (週一) 01:07。
搜尋萌娘百科 (按"/"快速搜尋)
有新的未讀公告

阅读更多:http://mzh.moegirl.tw/Template:Toggle2
本文引自萌娘百科(http://mzh.moegirl.tw ),文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0 中国大陆》协议。