Markdown之折叠语法以及表格内父子折叠

背景

在编写接口文档的时候发现一些特别扭的问题，就是一个表格来说明入参和出参的时候，怎么去表达嵌套的父子关系呢？查看了大厂的接口文档，比如微信支付，他们是有完善的接口文档页面，也都全部标记出了表格内的父子关系。

既然Markdown是目前这么流行的，肯定也会支持表内折叠的，于是查看了Markdown的语法。有几种折叠以及表内负责关系的实现，具体请看下方内容：

1、Markdown的折叠语法

<details> 
    <summary>指示标题</summary>
    内容
</details>

这样便可以实现折叠效果了，具体呈现结果如图所示：

折叠效果：

展开之后：

 

我们也见过一些代码快的折叠效果，接下来我们看看代码块的折叠语法：

 

<details> 
    <summary>展开查看</summary>
    <pre><code>
        此处为代码的块具体内容
    </code></pre> 
</details>

按照上方的语法嵌套便可完成代码块的折叠效果

2、表给内父子折叠

说到这我们用上法折叠语法，基本上达不到我们想要的结果，我们之前说过，Markdown支持引入css以及html。其实Markdown也是支持引入js内容的。

首先可以下看我这里的实现：

<tr  class="object" tabindex="1">
			<td ><span class="extend">+</span>  返回结果</td>
			<td >data </td>
			<td >map </td>
			<td >Y</td>
			<td ><p><span class="label-tips label-blue"> body</span>  返回的code码</p></td>
		  </tr>	
		  <tr>
			<td class="object-sub object-sub1 hide" colspan="5"><table class="table">
				<thead>
				  <tr>
					<th width="17%">参数名</th>
					<th>变量</th>
					<th width="17%">类型[长度限制]</th>
					<th width="10%">必填</th>
					<th width="38%">描述</th>
				  </tr>
				</thead>
				<tbody>
				  <tr >
					<td >菜单主键 </td>
					<td >result </td>
					<td >long </td>
					<td >是 </td>
					<td >菜单唯一标识 <br>
					  <span class="green">示例值：1 </span></td>
				  </tr>
				</tbody>
			  </table></td>
		  </tr>
                  
    
    <script>
	$(document).ready(function() { 
		$(".object").click(function(){
        var ids=$(this).attr("tabindex");
        if(ids){
            var iHtml=$(this)[0].children[0].children[0].innerHTML
            if($(".object-sub"+ids).css("display")==="none"){
                $(".object-sub"+ids).removeClass("hide");
                $(this)[0].children[0].children[0].innerHTML="-"

            }
            else{
                $(".object-sub"+ids).addClass("hide");
                $(this)[0].children[0].children[0].innerHTML="+"
            }
        }
    })
        });
</script>

这样就能够实现我们表格的折叠效果了，虽然没有大厂的api文档漂亮，但是基本上已经实现了我们想要的表格内父子关系的折叠效果！来看一下效果图：

折叠效果：

 

展开效果：

 

这样基本的Markdown折叠效果就完成了！有更好的方案，欢迎大家一起讨论！！

欢迎关注我 的   工  种   昊   《coder练习生》