菜單下拉菜單在手機上無法正確顯示

Question

我有一個drupal網站。它響應迅速。 在手機上，常規菜單應該以下拉菜單顯示。但是，當您單擊導航時，菜單選項卡出現在檢查元素中，但在屏幕上它只是一個普通的藍色框，您看不到鏈接。

該網站是http://jspca.org.il/

<ul class="menu" style="overflow: hidden; display: block;"><li class="first leaf"><a href="/en" title="" class="active">Home</a></li> 
<li class="leaf"><a href="/en/content/about-us" title="About Us">About</a></li> 
<li class="expanded"><a href="/en/content/adoption">Adoption</a><ul class="menu"><li class="first leaf"><a href="/en/content/policy" title="">Policy</a></li> 
<li class="leaf"><a href="/en/content/contract" title="">Contract</a></li> 
<li class="leaf"><a href="/en/dogs" title="">Adopt a Dog</a></li> 
<li class="leaf"><a href="/en/Cats" title="">Adopt a Cat</a></li> 
<li class="last leaf"><a href="/en/virtual-adoption" title="">Virtual Adoption</a></li> 
</ul><span class="drop-down-toggle"><span class="drop-down-arrow"></span></span></li> 
<li class="expanded"><a href="/en/content/volunteer" title="Volunteer">Volunteer</a><ul class="menu"><li class="first leaf"><a href="/en/content/shelter">Shelter</a></li> 
<li class="leaf"><a href="/en/content/volunteer-clinic">Volunteer at the Clinic</a></li> 

---

@media screen and (max-device-width: 440px) { 

    .top_left, 
    .top_right, 
    .search_block, 
    .region-user-menu{ width: 100% !important; } 

    #logo { text-align: center; width: 100%; } 

    #site-title{ width: 100%; } 

    #site-title a{ width: 100%; text-align: center; float:none; /* EMS */} 

    .social-icons{ position: inherit; width: 100%; } 

    .social-icons ul{ text-align: center; } 

    .top_right .region-user-menu ul.menu{ float: none; } 

    .block-menu ul{ float: none; text-align: center; } 
} 

它看起來像style="overflow: hidden; display: block;"正在被JS文件補充說，這只是出現在移動。 我有一個被稱爲JS腳本：

jQuery(document).ready(function($) { 
    $('.nav-toggle').click(function() { 
    $('#main-menu div ul:first-child').slideToggle(250); 
    return false; 
    }); 
    if(($(window).width() > 640) || ($(document).width() > 640)) { 
     $('#main-menu li').mouseenter(function() { 
     $(this).children('ul').css('display', 'none').stop(true, true).slideToggle(250).css('display', 'block').children('ul').css('display', 'none'); 
     }); 
     $('#main-menu li').mouseleave(function() { 
     $(this).children('ul').stop(true, true).fadeOut(250).css('display', 'block'); 
     }) 
     } else { 
    $('#main-menu li').each(function() { 
     if($(this).children('ul').length) 
     $(this).append('<span class="drop-down-toggle"><span class="drop-down-arrow"></span></span>'); 
    }); 
    $('.drop-down-toggle').click(function() { 
     $(this).parent().children('ul').slideToggle(250); 
    }); 
    } 

}); 

這是導致該問題？我如何適應它？

Answer 1

您正在使用舊的jQuery版本「v1.5.2」。 舊版本顯然有bug。 最好的解決方案是將版本更改爲更新的版本。如果你做不到然後修復你的CSS如下

.menu{ overflow:visible!important; } 

記得將它添加到只有小屏幕使用@media

另一種解決方案是做上述相同，但通過JS。下面添加

$('.menu').attr("style","overflow:visible"); 

行後

$('#main-menu div ul:first-child').slideToggle(250);