社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103
模板:嵌套分歧
此模板来源于代号鸢
1.用途
此模板用于分歧选项,可多层嵌套使用。 (以下示例为2层嵌套,实际使用中支持更多层结构。)
- A选项
- A1选项
- A2选项
- A3选项
- B选项
- B1选项
- B2选项
- C选项
- C1选项
- C2选项
2.使用方式
模板使用分为3个部分:JS、罗列分歧选项、罗列选项对应内容
2.1【JS】
使用此模板时,需要在页面最前面使用
{{JS|Qiantao.js}}
2.2【罗列分歧选项】
罗列同层级的所有选项,并以头尾包裹。
说明 | 参数说明 | 代码 |
---|---|---|
头 | {{嵌套分歧|头}} | |
尾 | {{嵌套分歧|尾}} | |
选项 | {{嵌套分歧|自定义选项的名字|自定义选项的id}} 选项id表示其为第几个选项,通常从1开始 |
{{嵌套分歧|自定义选项名字|1}} |
{{嵌套分歧|头}} {{嵌套分歧|选项1名字|1}} {{嵌套分歧|选项2名字|2}} {{嵌套分歧|选项3名字|3}} {{嵌套分歧|尾}}
2.3【选项对应内容】
有两种写法,支持一起使用
说明 | 参数说明 | 代码 |
---|---|---|
写法一:直接写入内容 | {{嵌套分歧|内容|自定义选项对应的内容|显示=任意值}} 显示参数可不填,填任意值则会使内容默认显示 |
{{嵌套分歧|内容|自定义选项对应的内容|显示=1}} {{嵌套分歧|内容|自定义选项对应的内容}} |
写法二:内容头 | {{嵌套分歧|内容头|显示=任意值}} 显示参数可不填,填任意值则会使内容默认显示 |
{{嵌套分歧|内容头|显示=1}} {{嵌套分歧|内容头}} |
写法二:内容尾 | {{嵌套分歧|内容尾}} |
直接在参数中写入内容
{{嵌套分歧|内容|此处为直接写入的内容1|显示=1}} {{嵌套分歧|内容|此处为直接写入的内容2}} {{嵌套分歧|内容|此处为直接写入的内容3}}
以内容头和内容尾包裹住内容
<!--内容1--> {{嵌套分歧|内容头|显示=1}} 此处为被包裹的内容1 {{嵌套分歧|内容尾}} <!--内容2--> {{嵌套分歧|内容头}} 此处为被包裹的内容2 {{嵌套分歧|内容尾}} <!--内容3--> {{嵌套分歧|内容头}} 此处为被包裹的内容3 {{嵌套分歧|内容尾}}
{{嵌套分歧|内容|此处为直接写入的内容1|显示=1}} {{嵌套分歧|内容|此处为直接写入的内容2}} {{嵌套分歧|内容头}} 此处为被包裹的内容3 {{嵌套分歧|内容尾}}
3.示例
3.1示例
代码:
{{JS|Qiantao.js}} <!--罗列同级选项--> {{嵌套分歧|头}} {{嵌套分歧|选项1名字|1}} {{嵌套分歧|选项2名字|2}} {{嵌套分歧|选项3名字|3}} {{嵌套分歧|尾}} <!--选项对应内容--> {{嵌套分歧|内容|这是选项1的内容1(写法一)|显示=1}} {{嵌套分歧|内容|这是选项2的内容2(写法一)}} {{嵌套分歧|内容头}} 此处为选项3的内容3(写法二) {{嵌套分歧|内容尾}}
效果展示:
3.2嵌套示例
代码:
{{JS|Qiantao.js}} <!--1级选项--> {{嵌套分歧|头}} {{嵌套分歧|选项1名字|1}} {{嵌套分歧|选项2名字|2}} {{嵌套分歧|选项3名字|3}} {{嵌套分歧|尾}} <!--1级内容1--> {{嵌套分歧|内容头}}选项1对应的内容1 {{嵌套分歧|内容尾}} <!--1级内容2:嵌套选项--> {{嵌套分歧|内容头}} {{嵌套分歧|头}}{{嵌套分歧|选项2-1名字|1}}{{嵌套分歧|选项2-2名字|2}}{{嵌套分歧|选项2-3名字|3}}{{嵌套分歧|尾}}<!--2级选项--> {{嵌套分歧|内容|这是选项2-1的内容2-1|显示=1}}{{嵌套分歧|内容|这是选项2-2的内容2-2}}{{嵌套分歧|内容|这是选项2-3的内容2-3}}<!--2级内容--> {{嵌套分歧|内容尾}} <!--1级内容3:嵌套选项--> {{嵌套分歧|内容头}} {{嵌套分歧|头}}{{嵌套分歧|选项3-1名字|1}}{{嵌套分歧|选项3-2名字|2}}{{嵌套分歧|选项3-3名字|3}}{{嵌套分歧|尾}}<!--2级选项--> {{嵌套分歧|内容|这是选项3-1的内容2-1|显示=1}}{{嵌套分歧|内容|这是选项3-2的内容2-2}}{{嵌套分歧|内容|这是选项3-3的内容2-3}}<!--2级内容--> {{嵌套分歧|内容尾}}
3.2效果展示:
4.依赖
将以下代码放到/Mediawiki:Qiantao.js下
$(".message_q2").click(function () { //增加开关功能 var input = $(this).text(); var status = $(this).attr("value"); if (status == "open") { console.log("11111111") $(this).removeClass('active') $(this).parent().nextAll(".message-item").css("display", "none") $(this).attr("value", "off"); } else { //当点击时给别的标签添加off,给本标签添加open $(".message_q2").attr("value", "off"); $(this).attr("value", "open"); $(this).parent().find(".message-tab-inputtext").text(input) $(this).siblings(".message_q2").removeClass('active') $(this).addClass('active') var i = $(this).attr("data-test") - 1 var length = $(this).parent().nextUntil(".message-tab-container") // console.log(length) $(this).parent().nextUntil(".message-tab-container").filter(".message-item").css("display", "none") // $(this).parent().nextAll(".message-item").css("display", "none") $(this).parent().nextAll(".message-item:eq(" + i + ")").css("display", "block") } })