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

Posted 2023-03-15

【中文标题】Jquery：下拉菜单在移动设备上无法正常工作

【英文标题】：Jquery : Dropdown menu not working correctly on mobile devices

【发布时间】：2017-12-18 21:26:44

【问题描述】：

我目前正在开发一个响应式网站，并且正在开发导航菜单。

我有一个显示一些社交媒体图标和其他内容的标题。使用媒体查询，我在较小的屏幕上显示菜单按钮并隐藏完整的导航菜单。单击按钮时，导航 div 会向下滑动并以块格式显示菜单项。我遇到的问题是，当我尝试在移动设备上使用菜单按钮时，div 会向下滑动，但一旦我进行任何类型的滚动，它就会消失。我在 Iphone5s、Ipad Air 2、Samsung Galaxy Note 4 上测试了该站点，结果始终相同：我单击菜单按钮，菜单出现，但每当我滚动时它就会消失。我尝试了不同的解决方案，但问题不会消失。

CSS

/* styles the preheader at the top of the page */
    .preheader
    background-color: #333;
    position: relative;
    top:0;
    width: 100%;
        max-width: 100%;
    min-height: 30px; 
    height: auto;
    border-bottom: 1px solid #1e1e1e;

    

    .preheader a  
    float: right;
    text-decoration: none;    
    margin-top:2px;
    margin-right: 2px;
    color: white;
    padding: 5px;
    font-size: 15px;
    

    .preheader button 
    float: right;
    text-decoration: none;  
    padding: 5px;
    margin-right: 2px;
    color: white;
    border: none;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    

    .preheader button:hover 
    opacity: 0.5;   
    
    .preheader a.preheaderbutton  
    color: white;
    font-family: "Constantia","Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
    font-size: 10px;
    text-transform: uppercase;
    border: 2px solid deepskyblue;
    margin: 0;

    
    .preheader a.preheaderbutton:hover 
    color: black;
    background-color: white;
    

    .mobileMenuWrapper 
    width: 100%;
    height: auto;
    position: relative;
    display: none;
    background-color: #111;
    color: white;
    -moz-transition: 0.45s;
    -ms-transition: 0.45s;
    -webkit-transition: 0.45s;
    transition: 0.45s;
    

    .searchDiv 
    width: 100%;
    height: 80px;
    display: none;
    background-color: #111;
    -moz-transition: 0.45s;
    -ms-transition: 0.45s;
    -webkit-transition:  0.45s;
    transition: 0.45s;
    

    .searchForm 
    color: #fff;
    

    .searchLabel 
    margin-left: 50px;
    color: #808080;
    text-transform: uppercase;  
    font-size: 1.1em;
    line-height: 1.5em;
    display: block;
    font-family: 'Gotham SSm A','Gotham SSm B';
    font-weight: 500;
    font-style: normal;
    padding: 0;
    z-index: 1;
    position: relative;
    
    .searchDiv input[type="text"] 
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 1.4em;
    background-color: #111;
    border: none;
    height: auto;
    padding: 10px;
    margin-left: 40px;
    margin-top: -5px;  
    

    .searchDiv input[type="submit"] 
    float: right;
    margin-top: -40px;
    display: flex;
    
    /*Display the header at the top of the page*/
    header 
    margin: 0px;
    background: #bb0000;
    color: white;
    padding: 0px;
    height: auto;
    width: 100%;
    position: relative;
        max-width: 100%;
    border-top: 1px solid #ab0000;
    border-bottom: 1px solid #9a0000;


    
    /*Controls the size of the text in the header*/
    header > h1 
    text-align: center;
    margin-left: 0px;
    font-size: 40px;
    font-family: sans-serif;
    padding: 0px;
    margin-bottom: -0.4em;
    


    header > p
    padding: 0px;
    font-family: "Gabriola";
    font-size:25px;
    margin-top: 0px;

    

nav   
        margin: 0px;
        display: block;
/*         height: 200px;*/

    

    /*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
    nav ul 
    display: flex; 
    flex-direction:row;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top: 1px solid #9a0000;
    justify-content:center;
    

    /*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
    nav ul li 
    flex: 1 0 auto;
    font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
    display: inline-block;
    font-size: 1em;
    font-weight: bolder;
    padding: 0;
    

    /*Determines how the links inside the navbar will be displayed.Gives them a background color*/
    nav ul li a 
    display: block;
    background: #bb0000;
    height: 25px;
    text-align:center;
    padding: 7px 8px;
    text-transform: uppercase;
    -moz-transition: 0.45s;
    -ms-transition: 0.45s;
    -webkit-transition:  0.45s;
    transition: 0.45s;
    
    /*Shows how unvisited links will look*/
    nav ul li a:link
    text-decoration: none;
    color: whitesmoke;
    

    /*Changes the color inside visited links*/
    nav ul li a:visited 
    color: whitesmoke;
    height: 25px;
    
    /*Determines what happens when you hover a link*/
    nav ul li a:hover
    color: black;
    background-color: white;
    

    .nolink:hover
    cursor:default;

    

    /*Shows what happens a link is active (page you are currently on)*/
    nav ul li a.active 
    background-color: indianred;
    color: white;
    

    /*Styles what happens when you hover an active link on an active page*/
    nav ul li a.active:hover 
    background-color: #bb0000;
    color: white;
    

    /*Dropdown stuff*/

    /* deals with level 1 submenus. Determines how they appear */
    .dropdown-content 
    display: none;
    position: absolute;
    color: black;
    min-width: 160px;
    border-bottom: 0.5px solid deepskyblue;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    

    /* Deals with level 2 submenus. Determines how and where they appear */
    .subsubmenu 
    display: none;
    position: absolute;
    left: 223px;
    top: 47%;
    color:black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    ul li .dropdown-content a:link
    text-decoration: none;
    color: whitesmoke;
    

    ul li .subsubmenu a:link
    text-decoration: none;
    color: black;
    

    /*Changes the color inside visited links*/
    ul li .dropdown-content a:visited 
    color: whitesmoke;
    margin-left: 60px;
    height: 25px;
    

    ul li .subsubmenu a:visited 
    color: black;
    margin-left: 60px;
    height: 25px;
    

    /* Styles the links inside level 1 submenus */
    .dropdown-content a 
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 12px;
    background-color: black;
    

    /* Styles the links inside level 2 submenus */
    .subsubmenu a
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 12px;
    background-color: #f9f9f9;
    
    .dropdown-content a:hover  
    background-color: #bb0000;    
    

    .subsubmenu a:hover    
    background-color: #bb0000;
    

    .subdropdown:hover .subsubmenu 
    display: block;
    color: whitesmoke;
    

    /* Making the Menu Responsive i.e workable on screens of different sizes */
#mobileMenuButton 
    display: none;



    .nav-toggle-label 
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    
    /*Hides the menu icon when the page is greater than 600pixels*/
    .icon 
        display: none;
    
    @media screen and (max-width: 768px)

         #mobileMenuButton 
    /*    width: 30px;*/
/*        float:right;*/
            padding-top: 8px;
            cursor: pointer;
            background: transparent;
            outline: none;
            border: none;  
            display: block;
            margin: auto;
            color: white;
         
         header h1 
            font-size: 35px;
        
        header p 
            font-size: 20px;
            margin-bottom: 3px;
            margin-top: 3px;
        
        .icon
        display: block;  
            margin-top: 10px;
        
        .hideOnMobile 
        display: none;
        
        .preheader 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
/*        max-width: 100%;*/
        height: 30px;
        z-index: 1;     
           


        #returnToTop 
/*        position: absolute;*/
        

        header 
        margin-top: 30px;
        

        .mainContent 
            

         nav ul 
            display: block; 
            

        nav ul li 
            display: block;
/*            border-bottom: 1px solid navy;*/
        

        nav ul li:first-child 
/*            border-top: 1px solid black;*/
        

        nav ul li:last-child 
            border-bottom: none;
        

        #menu  
            display: none;
        

            /* deals with level 1 submenus. Determines how they appear */
        .dropdown-content 
            display: none;
            position: relative;
        
        /* Deals with level 2 submenus. Determines how and where they appear */
        .subsubmenu 
            display: none;
            position: relative;
            width: 100%;
            left: 0;
            top:0;
        

         .dropdown-content a 
            text-align: center;    
           
            /* Styles the links inside level 2 submenus */
        .subsubmenu a
            text-align: center;
        
    

JS

$(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) 事件侦听器和相应的逻辑导致问题，完全删除它工作。

感谢您的回复。我添加了该事件侦听器，因为每当我调整屏幕大小（在桌面上）时都会遇到问题。步骤中会发生什么： 1. 我会以最小化模式刷新页面。 2. 然后我会尝试单击菜单按钮。 3. 下拉菜单后，我会最大化屏幕。 4. 在全宽时，水平导航菜单会进入，但display 的值是错误的block 而不是flex

【参考方案1】：

如 cmets 所示，问题出在这段代码中；

$(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 事件，并且，给定上述事件处理程序，将导致#menu 被隐藏。

但是，您也可以通过将浏览器的大小缩小到

---

要解决这个问题，我会更改您的处理程序，这样它只会在宽度超过您的 768 像素边界时更改元素；

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;
);

【讨论】：

这非常有效。只是出于好奇。这是其他网站通常的做法吗？

@Lombe：这是选项之一，是的。替代方案包括纯 CSS + 媒体查询，或复制导航，并根据当前视口大小显示（同样，通常通过 CSS）。