菜单下拉菜单在移动设备上无法正确显示

时间:2015-07-19 09:58:02

标签: css drupal responsive-design

我有一个drupal网站。它是响应。 在移动设备上,常规菜单应显示在下拉列表中。但是,当您单击导航时,菜单选项卡将显示在inspect元素中,但在屏幕上它只是一个纯蓝色框,您无法看到链接。

该网站为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);
    });
  }

});

这会导致这个问题吗?我该如何适应它?

1 个答案:

答案 0 :(得分:0)

您正在使用旧的jquery版本&#34; v1.5.2&#34;。 显然旧版本中有bug。 最佳解决方案是将版本更改为更新版本。如果你做不到,那就按照下面的方法解决你的问题

.menu{ overflow:visible!important; } 

请记住使用@media

将其添加到小屏幕

另一个解决方案是通过JS执行相同的操作。添加以下行

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

之后

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