前端收起和展示按钮功能实现简述

近期做可视化配置时，深感对用户而言，原先系统的配置流程太过复杂，初始可见的配置项过多，容易产生一种畏难的情绪。

为提高系统的易用性，故决定设置一个按钮，在用户进入此界面时只显示必要配置项，点击后展示高级配置。如此增加了配置功能的层次感，使用户不必花费更多的时间去关注一般情况下用不到的配置项，简化了配置图表的流程。以下简述实现方式。

按钮的话你可以通过项目的静态文件引入。我这边是依此网站直接引入，http://fontawesome.io/icons/。代码如下：

<button class="fold-data-button btn btn-default option-buffer">
        <i class="fa fa-chevron-up" aria-hidden="true">更多配置</i>
        <i class="fa fa-chevron-right" aria-hidden="true" style = "display: none;">收起更多</i>
    </button>

button的class是原有系统有一些css的配置关联，你可以根据自己的样式引入。js函数如下：

<!--收起或打开图的非常用基本配置项-->
    $(".fold-button").click(function() {
        $(".more").slideToggle("normal");
        $(".fa-chevron-right").toggle();
        $(".fa-chevron-up").toggle();
    });

在相应页面上加入上述代码，再将需要收起的div class里加入对应参数more，即可实现此功能。