MUI ，侧滑菜单加载的页面，输入框，按钮丢都无法点击，求解决方法

qq_33601255 2018-10-10 09:48:21

今天用MUI写一个移动端界面，想使用侧滑菜单，官方文档也只是说明怎么显示侧滑菜单，没有关于侧滑菜单加载页面的内容；

侧滑菜单正常，页面也能加载，就是

不知道是我写的有问题，还是框架有问题，求指导；

项目结构：

页面：

引用

代码如下：

index.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>

	<link href="css/mui.min.css" rel="stylesheet" />

	<style type="text/css">

		* { 

			touch-action: none; 

		}

		

		.mui-scroll-wrapper {

			background-color: #FFFFFF;

		}

		

		.mui-table-view-cell.mui-active,

		.mui-table-view-cell>a:not(.mui-btn).mui-active {

			color: #007AFF;

			border: #007AFF;

			background-color: transparent;

		}

		

	</style>

</head>

<body>

	

	<!-- 侧滑导航根容器 -->

	<div class="mui-off-canvas-wrap mui-draggable">

	    <!-- 主页面容器 -->

	    <div class="mui-inner-wrap">

	        <!-- 菜单容器 -->

	        <aside class="mui-off-canvas-left" id="offCanvasSide">

	            <div class="mui-scroll-wrapper">

	                <div class="mui-scroll">

	                    <!-- 菜单具体展示内容 -->

						<ul class="mui-table-view" id="items">

						    <li class="mui-table-view-cell menu">

						        <a class="mui-navigate-right" href="page/order/orderList.html">Item 1</a>

						    </li>

						    <li class="mui-table-view-cell">

						        <a class="mui-navigate-right">Item 2</a>

						    </li>

						    <li class="mui-table-view-cell">

						        <a class="mui-navigate-right">Item 3</a>

						    </li>

						</ul>

	                </div>

	            </div>

	        </aside>

	

			<!-- 主页面标题 -->

			<header class="mui-bar mui-bar-nav">

			    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>

			    <h1 class="mui-title">首页</h1>

			</header>

			

	   	 	<div class="mui-off-canvas-backdrop"></div>

	   	 	

	    </div>

	</div>

	

</body>

</html>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/mui.min.js"></script>

<script type="text/javascript" charset="utf-8">

	

	mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(){

		$(this).siblings('.mui-table-view-cell').removeClass('mui-active');

		$(this).addClass('mui-active');

	});



	

	mui('.menu').on('tap', 'a', function(e) {

		var myUrl = this.href;

		mui.init({

			subpages:[{

				url:myUrl,

				id:'list',

				styles:{

					top:'45px',

					bottom:'0px'

				}

			}],

			swipeBack:true

		});

		mui('.mui-off-canvas-wrap').offCanvas('close');

	});

</script>

orderList.html



<!-- 主页面内容容器 -->

<div class="mui-content mui-scroll-wrapper">

	<div class="mui-input-row">

	    <label>Switch</label>

	    <div class="mui-switch mui-active mui-switch-blue">

	        <div class="mui-switch-handle"></div>

	    </div>

	</div>

</div>

请帮忙看下是哪里有问题