Question

我已经包含 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!");
});
    });

Answer 1

  $(document).ready(function() {  
         $(document).on("swipeleft",function(){
         document.getElementById('handler-left').click();

         // alert("you swiped left!");

}）; }）;

自己找到解决方案：）

使用滑动支持如何将菜单重新滑入？

1 个答案: