首先打开P_cases.html,找到这个设置按钮，给它加入onclick：
我取名叫show_small() ，意思就是点击后，展示小用例列表,别忘了要传入大用例的id，这样才能确定要展示的是谁的小用例列表。
然后我们先去写好这个左侧列表的基础div容器，默认是隐藏的，点击后出现。
<div id="left_div" style="background-color: white;border: 1px solid black; z-index: 998;display: none;width:48%;height:100%; position:absolute;right:100%;top:0px;overflow-y: visible"> 我是内容 </div>
注意这里么的style的设置：
;position:absolute;right:100%;
这部分，是固定位置，并且距离右边界100%， 距离右边100%，那么就是这个样子，就好像是藏在了屏幕的左边我们看不到的一样。
然后我们点击之后，不但要给div的display属性变为显示，还要给它滑动到屏幕视线里，也就是距离右边界100% - 48%的位置，48%是它自身的宽度。
变成这样：
然后我们现在去写这个show_small()函数：
好，这里的逻辑要给大家细细说一下：
首先，我们点击大用例a的设置按钮时候，这个div滑动出来，也就是走的if。
然后我们去点击 大用例b的设置，这个div 我们做了一个动画效果，就是先快速撤回到左侧屏幕之左，然后再快速滑回来，这个过程中把小用例列表给切换成大用例b的了，走的else。
这里我们也学习了jquery的新方法: .css() 直接改style中的属性，然后.animate是带动画效果的改距离右边界的right的属性。
源码如下：
<script> function show_small(case_id) { if(document.getElementById('left_div').style.display == 'none'){ $("#left_div").css("display","block"); $("#left_div").animate({right:'52%'},'fast'); }else{ $("#left_div").css("display","none"); $("#left_div").animate({right:'100%'},'fast'); $("#left_div").css("display","block"); $("#left_div").animate({right:'52%'},'fast'); } } </script>
刷新页面，看看效果：
看来是成功滑动出来了。当然具体内部展示效果还需要我们一句一句的写，这里我们要设计下这个小用例列表的展示：
并不是简单的 像大用例列表那样，一进入页面的时候就带数据进来展示了。
而是当用户点击不同设置按钮的时候，通过请求获取实时的小用例列表，然后通过js的操作展示在这个div上。
而这段用来展示的js 就相当于一个刷新功能了，只是属于局部div刷新，并不是刷新整个页面。
但是具体效果我们可以先在html里写死俩个，效果调好了，我们在用js实现，最后删掉这俩个展示用的小用例接口html代码 即可。
这个左侧大div中，我们设置了三个按钮，然后还有一个真正装小用例列表的div，这个小div就是我们后续用js控制刷新展示的div。我们现在先在这个小div里写几个小用例实体，设计下展示效果：
暂时我们先用这个方式吧～ 关于点击效果和上下调整位置的功能，我们之后再加即可。
所以删掉这三个demo展示，然后去写js，新建这个刷新小用例列表的函数
然后这个里面我们用js实现的话，是需要去从后台获取到小用例数据才可以。所以这么写：
这个case_id就是我们一路传过来的大用例的id。后台根据这个id返回旗下所有小用例数据。然后我们接受到了这个ret后，解析，清空小div的内容，来换上新的内容即可。
思路很清晰，接下来就开始实现
忘了我们要展示个标题文案了，就是让人知道我现在打开的是哪个大用例。。。
在底部加上这个放置id和名称的 文案段落。
然后在js中控制显示：
当然，我们发现，我们这个show_small函数中并没有Case_name,所以我们要在一开始的时候 加上case_name传进来。
这三处红线，请确保不要出错。
然后我们刷新页面 ，看看效果:
这时候我们点击不同大用例的设置按钮，会发现动画效果，并且上面的数据也变化了：
好了，让我们继续回归主线， 既然要从后台获取到这些小用例的数据，那首先我们要去构造好数据库中的这个小用例表才行。
先来想一想这个小用例都包含什么字段呢？
id，自动的不用管
Case_id, 所属的大用例id
name，小用例的简单名字或描述
index, 当前序号，影响我们后续的执行顺序
api_method，请求方式
api_url，请求url
api_host,请求host
api_header, 请求头
api_body_method ,请求体类型
api_body, 请求体
get_path , 提取返回值-路径法代码
get_zz ,提取返回值-正则法代码
assert_zz ,断言返回值-正则法代码
assert_qz,断言返回值-全文检索是否存在法代码
assert-path,断言返回值-路径法代码
好了，暂时就需要这么多。我们之后还有很多其他字段比如公共请求头/变量/验签算法等。
好了，篇幅关系，本文内容到此结束，下节课我们继续实现吧～
