社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103

全站通知:

帮助:嵌套分歧

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

此模板来源于代号鸢

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(写法二)
{{嵌套分歧|内容尾}}


效果展示:

选项1名字
选项2名字
选项3名字
这是选项1的内容1(写法一)


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效果展示:

选项1名字
选项2名字
选项3名字

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")
        }
 	
 })