Question

我正在尝试在WordPress网站上创建响应式导航菜单。我使用flex-box设计了导航，导航具有子菜单。我的问题是，当我尝试打开子菜单时，该子菜单的li高度会更改为包含chrome开发工具和android mobile上的子菜单。但是在Iphone手机上，锂离子高度保持不变，这使得子菜单会停留在下一个lis上。

我试图将高度从100％更改为100vh。
我尝试编写自己的JS而不是jQuery，但是它没有用，所以我回到了jQuery。

我的html是使用wordpress生成的

<div id="vot-nav-sidebar" class="">
    <?php 
        wp_nav_menu( array(

            'theme_location' => 'headerMenu',
            'menu_class' => 'main_menu_ul_mobile list-group',
            'container' => '',
        ) );
        ?>
</div>

相关部分的CSS代码是

#vot-nav-sidebar .main_menu_ul_mobile {
  position:relative;
  padding:0;
  margin:0;
  top:0;
  left:0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#vot-nav-sidebar .main_menu_ul_mobile > li {
  width: 100%;
  height: 100vh;
  position:relative;
  display: flex;
  flex-wrap: wrap;
}


#vot-nav-sidebar .main_menu_ul_mobile li a {
  width: 100%;
  position:relative;
  display: block;
}

#vot-nav-sidebar .main_menu_ul_mobile li.has-sub .sub-menu {
  margin-left: 1rem;
  width: 100%;
  position:relative;
  display: none;
}

我在一个类中使用我的JS代码

constructor() {
    this.toggle_subMenu(this);
}


toggle_subMenu (that){
    var mainHasSub = $('#vot-nav-sidebar .main_menu_ul_mobile .has-sub');
    var mainHasSubAnchor = $('#vot-nav-sidebar .main_menu_ul_mobile .has-sub > 
    a');

    mainHasSub.click(function(){
      if ($(this).children('.has-sub > .sub-menu').css('display') === 'none') 
      {
        that.showSubmenu(this);
        return;
      }

      if ($(this).children('.has-sub > .sub-menu').css('display') === 'block') 
      {
        that.hideSubmenu(this);
        return;
      }

    });
}

showSubmenu(that){
  $(that).children('.has-sub > .sub-menu').slideDown('slow');
  var subHeight = $(that).children('.has-sub > .sub-menu').height();
  $(that).addClass('open');
}

hideSubmenu(that){
  $(that).children('.has-sub > .sub-menu').slideUp('slow');
  $(that).removeClass('open');
}

我猜这是一些CSS兼容性问题，因为该菜单可在PC和Android上使用。

Iphone CSS问题上的响应式子菜单溢出

0 个答案: