我想在一个mui-pages嵌套两个页面,这两个页面都带侧滑。在默认页面中打开侧滑菜单没有问题,但是关闭菜单时(即调用close方法)无法关闭侧滑菜单。表现为点击左箭头关闭时侧滑菜单遮罩层消失,但是菜单并不会收起,再次点击时报错:[Web浏览器] "Uncaught TypeError: Cannot read property 'offsetWidth' of null",具体表现详情请见附件图片,盼解答
代码如下:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!--标准mui.css-->
<link rel="stylesheet" href="../../../css/mui.css">
<link rel="stylesheet" href="../css/credit.css"/>
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="div_credit_main" class="mui-views">
<div class="mui-view">
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--表格页面开始-->
<div id="div_credit_table" class="mui-page">
<!-- 侧滑导航根容器 -->
<div id="div_credit_table_content" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!--页面标题栏开始-->
<header class="mui-bar mui-bar-nav">
<a class="mui-btn-link mui-pull-left" style="color: #666; margin-left: 7px;">授信管理</a>
<a id="a_credit_table_search" class="mui-pull-right">
<button type="button" class="mui-btn mui-pull-right" style="vertical-align: middle;">
<span class="mui-active mui-icon mui-icon-search" style="font-size: large; font-weight: bolder;"></span> 查询
</button>
</a>
</header>
<!--页面标题栏结束-->
<!-- 主界面具体展示内容 -->
<div class="mui-off-canvas-backdrop"></div>
</div>
<!-- 菜单容器 -->
<aside class="mui-off-canvas-right">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<header class="mui-bar mui-bar-nav">
<a id="a_credit_table_conditions_back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">查询</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form>
<div class="mui-input-row">
<label>查询方式</label>
<form class="mui-input-row">
<div class="mui-input-row mui-radio mui-left">
<label>radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio mui-left">
<label>radio</label>
<input name="radio1" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-left mui-disabled">
<label>disabled radio</label>
<input name="radio1" type="radio" disabled="disabled">
</div>
</form>
</div>
<div class="mui-input-row">
<label>请选择</label>
<select>
<option>全部</option>
<option>湖北中拓建博升建材部</option>
<option>湖北中拓</option>
<option>四川中拓</option>
</select>
</div>
<div class="mui-button-row">
<button type="button" id="btn_credit_table_ok" onclick="btnOkOnClick(1);" class="mui-btn mui-btn-primary">确定</button>
</div>
</form>
<!--end form-->
</div>
</div>
<!--
end 菜单内容
-->
</div>
</div>
</aside>
</div>
</div>
<!--表格页面结束-->
<!--列表页面开始-->
<div id="div_credit_list" class="mui-page">
<!-- 侧滑导航根容器 -->
<div id="div_credit_list_content" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-btn-link mui-pull-left" style="color: #666; margin-left: 7px;">授信管理</a>
<a id="a_credit_list_search" class="mui-pull-right">
<button type="button" class="mui-btn mui-pull-right" style="vertical-align: middle;">
<span class="mui-active mui-icon mui-icon-search" style="font-size: large; font-weight: bolder;"></span> 查询
</button>
</a>
</header>
<!-- 主界面具体展示内容 -->
<div class="mui-off-canvas-backdrop"></div>
</div>
<!-- 菜单容器 -->
<aside class="mui-off-canvas-right">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<header class="mui-bar mui-bar-nav">
<a id="a_credit_list_conditions_back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">查询</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form>
<div class="mui-input-row">
<label>查询方式</label>
<form class="mui-input-row">
<div class="mui-input-row mui-radio mui-left">
<label>A</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio mui-left">
<label>B</label>
<input name="radio1" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-left">
<label>C</label>
<input name="radio1" type="radio">
</div>
</form>
</div>
<div class="mui-input-row">
<label>请选择</label>
<select>
<option>全部</option>
<option>湖北中拓建博升建材部</option>
<option>湖北中拓</option>
<option>四川中拓</option>
</select>
</div>
<div class="mui-button-row">
<button type="button" id="btn_credit_list_ok" class="mui-btn mui-btn-primary" onclick="btnOkOnClick(2);">确定</button>
</div>
</form>
<!--end form-->
</div>
</div>
<!--
end 菜单内容
-->
</div>
</div>
</aside>
</div>
</div>
<!--列表页面结束-->
<script type="text/javascript" id="seajsnode" src="../../../js/seajs/sea-all.min.js"></script>
<script src="../../../js/mui/mui.min.js"></script>
<script src="../../../js/mui/mui.view.js"></script>
<script type="text/jscript">
//加载主模板块
seajs.use("../js/credit.js", function() {
});
function btnOkOnClick(index) {
switch(index) {
case 1:
alert(1);
break;
case 2:
break;
}
}
</script>
</body>
</html>