我已经包含了 jquery.mobile.custom.min.js，因为我在我的着陆页上实现了对旋转木马的滑动支持。
但是我有一个当前使用按钮操作的菜单，我现在正在努力实现滑动支持以“关闭”菜单(基本上向左滑动应该等于点击按钮)
相关的 HTML:
<body>
<!-- sidebar -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<input type="checkbox" name="handler-left" class="handler" id="handler-left" onclick="null" />
<div id = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html#">Portfolio</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="wrapper">
<p id="button">
<label for="handler-left" id="left" href="#">Menu</label>
</p>
我对脚本的愚蠢努力:
$(document).ready(function() {
$("menu").swipeleft(function() {
$(this).parent().handler('left');
});
});
这是处理程序的 CSS:
.handler {
display: none; }
#handler-left.handler:checked ~ #menu {
opacity: 1;
-webkit-transition: opacity 0s 0s;
-moz-transition: opacity 0s 0s; }
#handler-left.handler:checked ~ #wrapper {
-webkit-transform: translate3D(40%, 0, 0);
-moz-transform: translate3D(40%, 0, 0); }
#handler-left.handler:checked ~ #wrapper #content {
overflow: hidden; }
进度更新:
所以我设法检测到对整个文档的滑动，现在需要找到一种方法来猜测切换类吗？代码
$(document).ready(function() {
$(document).on("swipeleft",function(){
(".handler").??? }); });
更新 2:
我实际上找到了解决方案。
下面是实现该技巧的代码:
$(document).ready(function() {
$(document).on("swipeleft",function(){
document.getElementById('handler-left').click();
// alert("you swiped left!");
});
});
最佳答案
$(document).ready(function() {
$(document).on("swipeleft",function(){
document.getElementById('handler-left').click();
// alert("you swiped left!");
}); });
我自己找到了解决方案:)
关于javascript - 使用 Swipe 支持如何将菜单滑回？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25306932/