首次访问页面后，CSS高度过渡在iphone上不起作用

Question

我有一个网站，其中导航和页脚栏的css转换在iphone上无法正常工作。 我正在使用SASS编译成压缩CSS。 我试图消除overflow:hidden; 并使用边距代替高度，但是没有一个起作用。 我从来没有遇到过这个问题，也不知道是什么原因引起的。

该站点的实时版本为http://connectroot.com

这也在此站点上发生： http : //pbwebd.com/testing/ewealth

最新的网站是： http : //pbwebd.com/testing/artists-theme/

当浏览器在模拟iPhone时，菜单和页脚栏工作正常，但在实际设备上却不行。

第一次访问该站点时，一切都很好。 如果您导航到站点上的另一个页面，则菜单或底部栏不会滑动到正确的高度。 无论您转到哪个页面，甚至返回首页，都无法正常工作。 该网站是使用WordPress构建的。

由于导航和页脚栏也会发生相同的问题，因此我仅向您显示导航代码。

SASS：

.nav-wrapper {
  height: auto;
  position: relative;
  overflow: hidden;
  @include transition(height);
  @media #{$bpNAV2}{
    height: 0;
    &.open {
      height: 225px;
    }
  }
}
@mixin transition($type){
-webkit-transition: $type 300ms;
   -moz-transition: $type 300ms;
    -ms-transition: $type 300ms;
     -o-transition: $type 300ms;    
        transition: $type 300ms;
-webkit-transform: translateZ(0);

}

菜单PHP：

<div class="nav-wrapper">
    <div class="nav-div">
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
        </nav>
    </div>
    <div class="sub-nav-div">
        <nav>
            <?php $obj = get_queried_object();
            $custom_post_type = $obj->post_type;
            if(is_user_logged_in() && has_nav_menu('subdir')){
                echo '<div id="subdir-nav">';
                wp_nav_menu(array('theme_location' => 'subdir'));
                echo '</div>';
            } elseif(has_nav_menu('sub')){
                echo '<div id="sub-nav">';
                wp_nav_menu(array('theme_location' => 'sub'));
                echo '</div>';
            } ?>
        </nav>
    </div>
</div>

JS：

$("#toggle").on('click', function(event){
    $(".nav-wrapper").toggleClass('open');
});

对于此站点： http : //pbwebd.com/testing/artists-theme/ ，所有页面均有效，但首页仅在首次访问该页面时有效。 我似乎无法弄清楚问题出在哪里。 这是JS的另一个版本：

$('#toggle').on('click touchstart', function(){
    $('nav').toggleClass('show');
    return false;
});

如果我关闭手机后再打开，菜单将再次起作用。

Answer 1

如果我在javascript中包含touch事件，似乎可以解决此问题。 这是更新的JS：

$("#toggle").on('click touch', function(event){
    $(".nav-wrapper").toggleClass('open');
    return false;
});

***这不能解决所有网站的问题，仅适用于某些网站。