javascript - 菜单出现在桌面浏览器的移动 View 上，但不出现在实际手机上

Question

我正在使用 wordpress 开发网站。我正在制作自定义菜单。当您在 inspect 元素中激活 mobile view 时，它工作正常，但从实际手机来看，菜单似乎是透明的(它打开但您没有注意到，按右上角激活不可见的关闭按钮) .我试过添加 z-index。它的位置是固定的，但仍然没有任何效果。

jQuery(document).ready(function( $ ){
  var $ = jQuery;

  $(".mobile_menu_button").click(function(e){
    $(".mobile_menu li").css("margin-top","20px");
    $(".mobile_menu").fadeIn();
    $(".mobile_menu li").animate({marginTop: "0"}, 500);
    e.preventDefault();

    $(".mobile_menu ul").fadeIn();
  });

  $(".mobile_menu i").click(function(e){
    closeMenu();
  });
});

function closeMenu()
{
  var $ = jQuery;
  $(".mobile_menu li").animate({marginTop: "20px"}, 500);
  $(".mobile_menu").fadeOut();
}

这是CSS:

.mobile_menu ul{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 6% !important;
    background: white !important; 
}

这是 wordpress html/php 代码:

echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
  'container'  => '',
  'container_class' => '',
  'menu_class' => '',
  'menu_id' => '',
  'fallback_cb' => '',
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new qode_type4_walker_nav_menu(),
  'items_wrap'      => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
  'container'  => '',
  'container_class' => '',
  'menu_class' => '',
  'menu_id' => '',
  'fallback_cb' => '',
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new qode_type4_walker_nav_menu(),
  'items_wrap'      => '%3$s'
));
echo '</ul>';

如果您想测试，这里是链接:https://cloudypro.net/demo/nfbynour/

Answer 1

我在 iphone X 上使用 Safari 为您调试了这个，看起来 nav.mobile_menu 有一个溢出:隐藏在上面。因为从技术上讲，这没有任何高度，因为 ul 的位置是固定的，它不会向您显示任何内容。删除 overflow: hidden 并且你的导航会弹出。