个人中心
gpt4 book ai didi

javascript - 使用 Swipe 支持如何将菜单滑回？

转载 作者：太空宇宙 更新时间：2023-11-03 18:02:04 25 4
gpt4 key购买 nike

我已经包含了 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/

25 4 0
文章推荐： 小型 VM 上的 Ruby 1.9.1 或 Ruby 1.8.7 企业版？
文章推荐： c# - 具有相同格式的字符串未被识别为有效日期时间
文章推荐： PYTHONPATH 干扰 virtualenv
文章推荐： c# - ADO.net 上的 SQL 查询限制为 2100+ 个参数