菜單隱藏和切換奇怪的行為

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

嘗試通過$(".OpenTopMenu").blur()類的東西來更改$(document).click() $(".OpenTopMenu").blur() 。 這可能不適用於舊的瀏覽器。

Answer 2

您的觸摸和點擊基本上都在做同樣的事情。 對於移動設備用途，總是很高興知道“點擊”實際上可以看作是兩個彼此迅速跟隨的事件，即“ mousedown”和“ mouseup”事件，最后一個觸發“ click”。 在移動設備上，“點擊”與“觸摸端”同時觸發。 現在還有一個名為“ 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條件下，但不起作用。 有人可以告訴我為什么上層代碼有效，而這個無效嗎？