利用jq和C3 做一个帮助中心

利用C3 和 bootstrap做一个帮助中心

• 首先我们要先布局好HTML(这里用到的是bootstrap的tab插件，因为项目中运用的是bootstrap的UI框架)

<ul id="firstMenu">
                        <li class="fm-item">
                            <p>新手上路<span class="dropdown active"><i class="iconfont">&#xe698;</i></span></p>
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#one_1" aria-controls="one_1" role="tab" data-toggle="tab">购物流程</a></li>
                                <li role="presentation"><a href="#one_2" aria-controls="one_2" role="tab" data-toggle="tab">订单查询</a></li>
                                <li role="presentation"><a href="#one_3" aria-controls="one_3" role="tab" data-toggle="tab">常见问题</a></li>
                            </ul>
                        </li>
                        <li class="fm-item">
                            <p>支付方式<span class="dropdown"><i class="iconfont">&#xe698;</i></span></p>
                            <ul class="nav nav-tabs" role="tablist" style="display: none">
                                <li role="presentation"><a href="#two_1" aria-controls="two_1" role="tab" data-toggle="tab">网上支付</a></li>
                            </ul>
                        </li>
                        <li class="fm-item">
                            <p>配送服务<span class="dropdown"><i class="iconfont">&#xe698;</i></span></p>
                            <ul class="nav nav-tabs" role="tablist" style="display: none">
                                <li role="presentation"><a href="#three_1" aria-controls="three_1" role="tab" data-toggle="tab">订单进度查询</a></li>
                                <li role="presentation"><a href="#three_2" aria-controls="three_2" role="tab" data-toggle="tab">验收与签收</a></li>
                            </ul>
                        </li>
                        <li class="fm-item">
                            <p>收售后服务<span class="dropdown"><i class="iconfont">&#xe698;</i></span></p>
                            <ul class="nav nav-tabs" role="tablist" style="display: none">
                                <li role="presentation"><a href="#four_1" aria-controls="four_1" role="tab" data-toggle="tab">订单进度查询</a></li>
                                <li role="presentation"><a href="#four_2" aria-controls="four_2" role="tab" data-toggle="tab">验收与签收</a></li>
                            </ul>
                        </li>
                        <li class="fm-item">
                            <p>商家合作<span class="dropdown"><i class="iconfont">&#xe698;</i></span></p>
                            <ul class="nav nav-tabs" role="tablist" style="display: none">
                                <li role="presentation"><a href="#five_1" aria-controls="five_1" role="tab" data-toggle="tab">商家入驻</a></li>
                                <li role="presentation"><a href="#five_2" aria-controls="five_2" role="tab" data-toggle="tab">商家规则</a></li>
                                <li role="presentation"><a href="#five_3" aria-controls="five_3" role="tab" data-toggle="tab">入驻流程</a></li>
                            </ul>
                        </li>
                    </ul>

• 接下来CSS样式

#firstMenu{
    color: #4a4a4a;
}
#firstMenu>li{
    background-color: #eaeaea;
    width: 100%;
    font-size: 1.4rem;
    position: relative;
    cursor: pointer;
    margin-bottom: 1px;
}
#firstMenu>li>p{
    padding: 12px 20px;
}
#firstMenu>li .dropdown{
    float: right;
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -ms-transition: transform 0.3s;
    -o-transition: transform 0.3s;
}
#firstMenu>li .dropdown.active{
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);      /* IE 9 */
    -webkit-transform: rotate(180deg);  /* Safari and Chrome */
    -o-transform: rotate(180deg);       /* Opera */
    -moz-transform: rotate(180deg);     /* Firefox */
}
#firstMenu>li .dropdown i{
    color: #999;
}

#firstMenu>li>ul{
    background-color: #fff;
    position: relative;
    top:0px;
    left:0;
}

#firstMenu>li>ul>li{
    width: 100%;
}
#firstMenu>li>ul>li>a{
    padding:10px 0 10px 48px;
    font-size: 1.2rem;
    color: #4a4a4a;
    margin-right: 0;
}
#firstMenu>li>ul>li>a:hover{
    background-color: #f5f5f5;
}

#firstMenu>li>ul>li.active>a{
    background-color: #f5f5f5;
}

（样式根据自己的项目进行相应的编写）

• 这里因为没有交互设计师告诉我怎么交互，所以我就采用的fadeIn 、 fadeOut 、fadeToggle 和C3的旋转与过渡来实现菜单栏的交互，接下来是js代码

// 点击一级菜单，出现子菜单样式
var $firstMenu = $("#firstMenu");
$firstMenu.children("li").click(function (e) {
    $(this).children("ul").fadeToggle(200);// 二级ul要点击切换出现与隐藏
    $(this).find(".dropdown").toggleClass("active"); // 下拉箭头增加active属相，也就是旋转和过渡
    $(this).siblings("li").children("ul").attr("style","display:none"); // 令其他的二级ul隐藏
    $(this).siblings("li").find(".dropdown").removeClass("active"); // 其他的一级菜单的箭头回原位
});

$('.nav-tabs a').click(function (e) {   // tab 选项卡的点击时间
    e.stopPropagation();  // 阻止冒泡到父元素的点击事件
    e.preventDefault();
    $(this).tab('show');
    $(this).parents("li.fm-item").siblings("li").find("ul.nav").children("li").removeClass("active"); // 这里令其他的二级菜单的个项去除选中属性
});

• 后台的方法是给一个固定的id 请求相对应的数据即可。