需求：实现在一个html页面中实现点击不同按钮，实现弹出不同侧滑菜单的效果，还请大家指教。
以前不是做前端的，最近公司有这方面的需求，来学习，遇到了问题有时候不知道怎么解决，在社区找了半天也没有找到想要的答案，所以通过其它方式达到了所要的效果，供坑友们参考。
<!doctype html>
<head>
<meta charset="UTF-8">
<title>在线监控</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<link rel="stylesheet" href="../css/web5.css" />
<style>
body {
font: 400 14px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft YaHei", hei !important;
}
.aside_content {
margin-top: 60px;
}
.cml-table-view-cell {
padding: 3px 2px;
}
.mui-table-view-cell .ct-right-text {
position: absolute;
font-size: 12px;
height: 16px;
line-height: 16px;
right: 40px;
top: 50%;
margin-top: -8px;
}
</style> </head>
<body>
<div class="mui-off-canvas-wrap mui-slide-in">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a id="toaside" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">在线监控</h1></header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a>
<a class="mui-tab-item"><span class="mui-icon mui-icon-phone"></span><span class="mui-tab-label">电话</span></a>
<a class="mui-tab-item"><span class="mui-icon mui-icon-email"></span><span class="mui-tab-label">邮件</span></a>
<a class="mui-tab-item"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">设置</span></a>
</nav>
<div id="cmlcontent" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll"><input id="uistate" type="hidden" /><input id="entityid" type="hidden" entityid="com.cmlsoft.vo.sys.online.OnlineKey" /><input id="pk_bill" type="hidden" pkfield='pk_visitpaper' pk_bill="" />
<ul class="mui-table-view" style="margin-top: 30px;">
<li class="mui-table-view-cell cml-aside" for="pk_operator">
<a id="pk_operator_btn" class="mui-navigate-right cml-tag-size"><span id="pk_operator_title">操作员</span><span id="pk_operator" valuetype="html" isref="true" reffield="pk_operator_ref" refshow="name" class="cml-init ct-color-blue ct-right-text">选择</span></a>
</li>
<li class="mui-table-view-cell cml-table-view-cell mui-input-row"><label>最近操作时间</label><input id="visitorname" valuetype="val" class="cml-init mui-text-right" type="text" placeholder="请输入最近操作时间"></li>
<li class="mui-table-view-cell cml-aside" for="pk_loginway">
<a id="pk_loginway_btn" class="mui-navigate-right cml-tag-size"><span id="pk_loginway_title">登录方式</span><span id="pk_loginway" valuetype="html" isref="true" reffield="pk_loginway_ref" refshow="name" class="cml-init ct-color-blue ct-right-text">选择</span></a>
</li>
</ul>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
<!--弹出菜单-->
<aside id="aside" class="mui-off-canvas-right">
<header class="mui-bar mui-bar-nav">
<h1 id="aside_title" class="mui-title">登录方式</h1>
</header>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="pk_operator_content" for="pk_operator" class="aside_content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
</div>
<div id="pk_loginway_content" for="pk_loginway" class="aside_content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script type="text/javascript">
mui.init();
mui(".mui-table-view").on('tap', '.cml-aside', function() {
//获取id
var targetid = $(this).attr("for")
var title = $("#" + targetid + "_title").html();
$("#aside_title").html(title);
var asides = document.getElementsByClassName("aside_content");
for(var i = 0; i < asides.length; i++) {
var forid = asides[i].getAttribute("for");
if(forid && forid == targetid) {
$(asides[i]).attr("style", "display: block;");
} else {
$(asides[i]).attr("style", "display: none;");
}
}
mui("#aside").offCanvas("show");
});
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005
});
</script> </body>
