Question

$(function(){
    $(".OpenTopMenu").click(function (e) {
        $("#top_menu").slideToggle("fast");
        e.stopPropagation();
    });
    $(document).click(function() {
        $("#top_menu").hide();
    });
    $(document).on("touchend", function (event) {
        if (!$(event.target).closest("#top_menu").length) {
            $("#top_menu").hide();
        }
    });
});

大家好，我在切换和隐藏时遇到了一个奇怪的问题。

正如您在我的代码中看到的那样。如果我触摸菜单按钮（.OpenTopMenu）菜单（#top_menu）切换。

这就是问题所在。如果＃top_menu可见，那么当我触摸.OpenTopMenu时，＃top_menu将隐藏然后再切换为可见。因此，我无法在触摸菜单按钮（.OpenTopMenu）时隐藏#top_menu。

有人可以帮我这个吗？

由于

Answer 1

尝试通过$(document).click()之类的内容更改$(".OpenTopMenu").blur()。这可能不适用于旧浏览器。

Answer 2

你的touchend和点击基本上是做同样的事情。对于移动用途，总是很高兴知道“点击”实际上可以看作是两个快速相互关联的事件，即“mousedown”和“mouseup”事件，最后一个触发“点击”。在移动设备上，“点击”与“touchend”同时触发。现在还有一个名为“touchstart”的事件，当用户将他/她的手指放在玻璃上时会触发该事件。

您现在想知道这与您的问题有什么关系。那么，它与您的文档点击有关..

我个人会用以下方式解决你的问题;

var userClick = function(){
   //you will need something that determines whether your user is 
   //using a mobile device or not.
   return (Browser.isMobile)? "touchend" : "click";
};

var menu = {
   isOnMenu:false,
   isOnMenu_reset:null,
   attachEvents:function(){
      $('#top_menu').on('mouseenter',function(){
          menu.isOnMenu = true;
      }).on('mouseleave',function(){
          menu.isOnMenu = false;
      }).on('touchstart',function(){
          clearTimeout(menu.isOnMenu_reset);
          menu.isOnMenu = true;
      }).on('touchend',function(){
          menu.isOnMenu_reset = setTimeout(function(){
              menu.isOnMenu = false;
          },30);
      });

      $('.OpenTopMenu').on(userClick(),function(){
          $("#top_menu").slideToggle("fast");
      });

      $(document).on(userClick(),function(){
          if(!menu.isOnMenu){
             $('#top_menu').slideToggle("fast");
          }
      });
   },
   init:function(){
       menu.attachEvents();
   }
};
$(function(){
    menu.init();
});

Answer 3

我只想点击并触摸测试目的。

但它只需要与touchend合作。这是我最终使用的工作代码。感谢。

$(document).ready(function(){
    $(".OpenTopMenu").click(function(){
        $("#top_menu").slideToggle("fast");
    });
});
$(document).on("touchend", function(event){
    var $trigger = $(".OpenTopMenu");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $("#top_menu").slideUp("fast");
    }            
});

我之前尝试过

！event.target.hasClass（'OpenTopMenu'）而不是$ trigger！== event.target

在if条件下

但它不起作用。有人可以告诉我为什么上面的代码工作而这个没有？

菜单隐藏和切换奇怪的行为

3 个答案: