Javascript Jquery:下拉菜单在移动设备上无法正常工作

我目前正在制作一个响应性强的网站，并且正在制作导航菜单

我有一个预读器，它显示了一些社交媒体图标和其他东西。使用媒体查询，我在较小的屏幕上显示一个菜单按钮，并隐藏完整的导航菜单。单击按钮时，导航div向下滑动并以块格式显示菜单项。我遇到的问题是，当我尝试使用移动设备上的菜单按钮时，div会向下滑动，但只要我进行任何形式的滚动，它就会消失。我在Iphone5s、Ipad Air 2、三星Galaxy Note 4上测试了这个网站，结果总是一样的：我点击菜单按钮，菜单就会显示出来，但每当我滚动时，菜单就会消失。我尝试过不同的解决方案，但问题不会消失

CSS

JS

$（文档）.ready（函数（）{
如果（window.innerWidth>768）{
$（'.dropdown'）。悬停(
函数（）{
$（此）.children（“.dropdown content”）
.延迟（100）
.向下滑动（400）；
},
函数（）{
$（此）.children（“.dropdown content”）
.clearQueue（）
.slideUp（0）；
}
); 
}
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>768）{
$（'.dropdown'）。悬停(
函数（）{
$（此）.children（“.dropdown content”）
.延迟（100）
.向下滑动（400）；
},
函数（）{
$（此）.children（“.dropdown content”）
.clearQueue（）
.slideUp（100）；
}
); 
} 
}).resize（）；
});
//移动设备的下拉功能
$（文档）.ready（函数（）{
//$（'#myTopnav'）。前置（''）；
$（窗口）.on（'resize'，函数（e）{
如果（$（窗口）.width（）>768）{
$（“#菜单”）.show（）；
$（“#菜单”）.css({
显示：“flex”
});
}else if（窗内宽度<768）{
$（“#菜单”）.hide（）；
$（“#菜单”）.css({
显示：“无”
});
}
});
$（“#移动按钮”）。单击(
职能（e）{
$（“#菜单”）。切换（700）；
$（“#菜单”）.css({
显示：“块”
});
//e.停止传播（）；
$（“#校长”）.focus（）；
}
);
}); 

如评论所示，问题在于这段代码

$(window).on('resize', function(e){
   if ($(window).width() > 768){
       $('#menu').show();
       $('#menu').css({
        display : 'flex'
    });
   } else if ( window.innerWidth < 768){
       $('#menu').hide();
       $('#menu').css({
        display : 'none'
    });
   }
});

---

您的上一个

$（窗口）。在（'resize'）上，函数（e）{

事件侦听器和相应的逻辑导致了问题，将其完全删除是可行的。感谢您的回复。我添加了该事件侦听器，因为每当我调整屏幕大小时（在桌面上）都会遇到问题。步骤中会发生什么：1.我会在最小化模式下刷新页面。2.然后我会尝试单击菜单按钮。3.在删除菜单后，我会将屏幕最大化。4.在全宽范围内，水平导航菜单会出现，但显示的

值
块
而不是
flex
这非常有效。只是出于好奇。其他网站通常都是这样做的吗？@Lombe:是的，这是选项之一。可选选项包括纯CSS+媒体查询，或复制导航，并根据当前视口大小显示一个（通常通过CSS）。
$(document).ready(function() {

    if (window.innerWidth > 768){
        $( '.dropdown' ).hover(
        function(){
            $(this).children('.dropdown-content')
                .delay(100)
                    .slideDown(400);

        },
        function(){
            $(this).children('.dropdown-content')
                .clearQueue()
                .slideUp(0);
        }
       ); 
    }

     $(window).resize(function () {
         if ($(window).width() > 768) {
             $( '.dropdown' ).hover(
            function(){
                $(this).children('.dropdown-content')
                    .delay(100)
                        .slideDown(400);

            },
            function(){
                $(this).children('.dropdown-content')
                    .clearQueue()
                        .slideUp(100);
            }
           ); 
         } 
     }).resize();  

});

// drop down functionality for mobile
$(document).ready(function(){


//    $('#myTopnav').prepend('');


    $(window).on('resize', function(e){
       if ($(window).width() > 768){
           $('#menu').show();
           $('#menu').css({
            display : 'flex'
        });
       } else if ( window.innerWidth < 768){
           $('#menu').hide();
           $('#menu').css({
            display : 'none'
        });
       }
    });


    $('#mobileMenuButton').click(
      function(e) {
           $('#menu').toggle(700);
              $('#menu').css({
                display : 'block'
            });
//          e.stopPropagation();
          $('#schoolHeader').focus();
            }
        );
}); 

$(window).on('resize', function(e){
   if ($(window).width() > 768){
       $('#menu').show();
       $('#menu').css({
        display : 'flex'
    });
   } else if ( window.innerWidth < 768){
       $('#menu').hide();
       $('#menu').css({
        display : 'none'
    });
   }
});

var wasSmall;

$(window).on('resize', function(e) {
   var isSmall = $(window).width() < 768;

   // If nothing has changed, don't do anything...
   if (isSmall === wasSmall) {
       return;
   }

   if (isSmall) {
       $('#menu').hide();
       $('#menu').css({
          display : 'none'
       });
   } else {
       $('#menu').show();
       $('#menu').css({
        display : 'flex'
       });
   }

   wasSmall = isSmall;
});