Question

我需要稍微重建这个项目。我想在991px以下的宽度下单击该菜单。有趣的是，桌面菜单的行为与我希望用于移动设备的方式相同。

当元素具有.nomobiledropdownhover类时，它们的行为将与预期的一样

最重要的是此片段，适用于移动设备：

$("#navbarSupportedContent li").hover(
      function(){
          if (!$(this).hasClass('nomobiledropdownhover')) {
              return;
          }else{
              $(this).children('ul').hide();
              $(this).children('ul').slideDown('fast');
              $(this).addClass('open ');
          }

          if(opmenu == 0){
              menu_height($(this),'in');

              opmenu = 1;
          }
      },
      function () {

          if (!$(this).hasClass('nomobiledropdownhover')) {
              return;
          }else{
              $('ul', this).slideUp('fast');
              $(this).removeClass('open ');
          }

          menu_height($(this),'out');
          opmenu = 0;
      });


}

，并且在台式机上是这样的：

$('.dropdown-toggle').on('click', function(e) {

        if ($(this).closest('.dropdown').hasClass('nomobiledropdownhover')) {

          $(this).closest('.dropdown').removeClass('open ');
          return 0;

        }else{
          $('.dropdown').find('.dropdown-menu').attr('style', '');

          var menuopen = $(this).closest('.dropdown');
          // menuopen.find('.dropdown-menu').attr('style', '');
          menuopen.find('.dropdown-menu').css('display', 'block');
          menuopen.find('.dropdown-menu').css('top', '0');

          setTimeout(function(){

            $("html, body").stop().animate({scrollTop:menuopen.offset().top}, 300, 'swing', function() {
            });

          },120);
        }

  });

我把所有东西都粘起来了，因为这很混乱 https://github.com/Mikelinsky/hover-on-mibile/blob/master/assets/js/script.js

在991px宽度以下，菜单在单击后打开，在单击其他位置后关闭

Answer 1

我认为主要的问题是您依赖于hover（）方法，该方法捕获鼠标输入和鼠标离开事件，而这些事件从未像大多数移动设备上那样在触摸屏上触发。

您可能应该依靠触摸事件，而不是单击或悬停，如以下答案所示：https://stackoverflow.com/a/11398089/6949810

如何在手机上处理悬停？

1 个答案: