<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade account-modal in" id="step1" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号信息</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">用户姓名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class="col-sm-3 control-label">用户备注</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">邮箱地址</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号状态</label> <div class="col-sm-5"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="radio" name="status" autocomplete="off" checked />启用 </label> <label class="btn btn-default"> <input type="radio" name="status" autocomplete="off" checked />停用 </label> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-warning" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step2" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号密码</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">重置密码</label> <div class="col-sm-5"> <input type="password" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label"></label> <div class="col-sm-5"> <input type="checkbox" value="1" />显示明文 </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-info" name="prev">上一步</button> <button type="button" class="btn btn-warning" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step3" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号角色权限</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">请选择角色权限</label> </div> <!-- <div class="form-group has-feedback"> <div class="col-sm-offset-3 col-sm-8"> <dl> <dt><label ><input type="checkbox" value=1 />店长</label></dt> <dd> 可以管理单店的信息和功能 </dd> <dt><label ><input type="checkbox" value=1 />财务</label></dt> <dd> 可以管理多个结算账户 </dd> <dt><label ><input type="checkbox" value=1 />区域经理</label></dt> <dd> 可以开店，并管理多个店铺的基本信息和功能 </dd> <dt><label ><input type="checkbox" value=1 />集团经理</label></dt> <dd> 管理所有店铺信息和功能及结算数据 </dd> <dt><label ><input type="checkbox" value=1 />系统管理员</label></dt> <dd> 超级管理员，全部权限 </dd> </dl> </div> </div> --> <!-- <div class="form-group has-feedback"> <div class="col-sm-offset-1 col-sm-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">店长</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"> <div class="panel-body"> <p>可以管理单店的信息和功能</p> <p>选择店长管理店铺</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">财务</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel"> <div class="panel-body"> <p>可以管理多个结算账户能</p> <p>选择结算账户</p> </div> </div> </div> </div> </div> </div> --> <div class="form-group has-feedback"> <div class=" col-sm-offset-1 col-sm-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <dl> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-exanded="true" aria-controls="collapseOne" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 店长 </a> </dt> <dd> 可以管理单店的信息和功能 </dd> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"> <h6>选择店长管理店铺</h6> <div> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（西直门11店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（东直门1111店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（朝阳门22222店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（正阳门121212店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（宣武门2222店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（西单121212店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（天坛店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（世贸天街店） </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊（blabalbal店） </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-exanded="false" aria-controls="collapseTwo" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 财务 </a> </dt> <dd> 可以管理多个结算账户 </dd> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"> <h6>选择结算账户</h6> <div> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blabalbal店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（bla店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blabalb店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blabalbalbasdf店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（bla店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blabalb店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（bl店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blaba店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blaba店） </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊（blabalbal店） </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-exanded="false" aria-controls="collapseThree" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 区域经理 </a> </dt> <dd> 可以开店，并管理多个店铺的基本信息和功能 </dd> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"> <h6>选择区域经理管理店铺</h6> <div> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blabalbal店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（bla店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blabalb店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blabalbalbasdf店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（bla店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blabalb店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（bl店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blaba店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blaba店） </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊（blabalbal店） </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a class=""> 集团经理 </a> </dt> <dd> 管理所有店铺的基本信息和功能及结算数据 </dd> <dt> <label><input type="checkbox" value="1" /></label> <a class=""> 系统管理员 </a> </dt> <dd> 超级管理员，全部权限 </dd> </dl> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-info" name="prev">上一步</button> <button type="button" class="btn btn-warning" name="save">保存</button> </div> </div> </div> </div>

.main {height : 2000px;} .chosen-item {display:inline-block; margin-right:1rem;}

$('.account-modal').hide(); $('.account-modal[id=step1]').show(); $('.btn').on('click', function (e) { var $this = $(this), act = $this.attr('name'); var $modal = $this.parents('.account-modal'); $('.account-modal').hide(); if ($modal.attr('id') == 'step1' && act == "next") { $('.account-modal[id=step2]').show(); } if ($modal.attr('id') == 'step2' && act == "next") { $('.account-modal[id=step3]').show(); } if ($modal.attr('id') == 'step2' && act == "prev") { $('.account-modal[id=step1]').show(); } if ($modal.attr('id') == 'step3' && act == "prev") { $('.account-modal[id=step2]').show(); } if (act == 'save') { alert("保存成功"); } }); $('.panel-collapse').on('hide.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-down'); }); $('.panel-collapse').on('show.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-up'); console.info($('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function () {return !$(this).hasClass('in')})); $('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function ( ) { return $(this).hasClass('in'); }).collapse('hide'); });