|
|
小弟日前遇到jquerymobile的如下情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Dr.Passport</title>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).on("mobileinit",function() {
$.mobile.defaultPageTransition = "none";
});
</script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="cordova.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- PAGE/ -->
<div data-role="page" id="_1_1" class="ui-page-theme-a">
<!-- common side_menu/ -->
<div data-role="panel" id="panel-reveal">
<h1 class="menu_title"><a href="#_1_1"><img src="img/logo_menu.svg"></a></h1>
<ul class="menu01">
<li><a href="#_1_2" >_1_2</a></li>
<li><a href="#_1_3" >_1_3</a></li>
<li><a href="#_1_4" >_1_4</a></li>
</ul>
</div>
<!-- /common side_menu -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="page_title"></h1>
<a class="burger_menu" href="#panel-reveal" data-role="button"><img src="img/icon_menu1.svg" height="34" width="48"></a>
<div id="totop"><span>totop</span></div>
</div>
<!-- /PAGE -->
<!-- PAGE/ -->
<div data-role="page" id="_1_2" class="ui-page-theme-a">
<!-- common side_menu/ -->
<div data-role="panel" id="panel-reveal">
<h1 class="menu_title"><a href="#_1_1"><img src="img/logo_menu.svg"></a></h1>
<ul class="menu01">
<li><a href="#_1_2" >_1_2</a></li>
<li><a href="#_1_3" >_1_3</a></li>
<li><a href="#_1_4" >_1_4</a></li>
</ul>
</div>
<!-- /common side_menu -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="page_title"></h1>
<a class="burger_menu" href="#panel-reveal" data-role="button"><img src="img/icon_menu2.svg" height="34" width="48"></a>
<div id="totop"><span>totop</span></div>
</div>
<!-- /PAGE -->
<!-- PAGE/ -->
<div data-role="page" id="_1_3" class="ui-page-theme-a">
<!-- common side_menu/ -->
<div data-role="panel" id="panel-reveal">
<h1 class="menu_title"><a href="#_1_1"><img src="img/logo_menu.svg"></a></h1>
<ul class="menu01">
<li><a href="#_1_2" >_1_2</a></li>
<li><a href="#_1_3" >_1_3</a></li>
<li><a href="#_1_4" >_1_4</a></li>
</ul>
</div>
<!-- /common side_menu -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="page_title"></h1>
<a class="burger_menu" href="#panel-reveal" data-role="button"><img src="img/icon_menu3.svg" height="34" width="48"></a>
<div id="totop"><span>totop</span></div>
</div>
<!-- /PAGE -->
<!-- PAGE/ -->
<div data-role="page" id="_1_4" class="ui-page-theme-a">
<!-- common side_menu/ -->
<div data-role="panel" id="panel-reveal">
<h1 class="menu_title"><a href="#_1_1"><img src="img/logo_menu.svg"></a></h1>
<ul class="menu01">
<li><a href="#_1_2" >_1_2</a></li>
<li><a href="#_1_3" >_1_3</a></li>
<li><a href="#_1_4" >_1_4</a></li>
</ul>
</div>
<!-- /common side_menu -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="page_title"></h1>
<a class="burger_menu" href="#panel-reveal" data-role="button"><img src="img/icon_menu4.svg" height="34" width="48"></a>
<div id="totop"><span>totop</span></div>
</div>
<!-- /PAGE -->
</body>
</html>
在script.js中有如下js:$(document).on('click', '.burger_menu',function (event) {
$(this).parent('div').prev().panel("open")
return false;
});
用来展开panel,
问题是:有时候点击这个链接panel可以展开.但是panel里却是白茫茫的一片! 链接都看不见了!
求大神指点一二!
|
|
/1 
发表于 2015-4-20 20:58:14
收藏
转播
淘帖
发表于 2015-4-20 21:45:53