Question

所以我一直在完成我的新投资组合，现在正处于质量保证和错误修复阶段。其中一个重大问题是在iOS Safari中，我的iPad和我的iPhone 6都有。我的导航是一个画布抽屉导航，在jQuery中使用toggleClass切换。

我现在已将我的iPad连接到我的计算机的野生动物园检查员身上，并且可以看到这些课程正在切换，但导航并不像在计算机或iOS上那样动画铬。这种情况发生在iPad Air和iPhone 6的两个方向上。很奇怪，对吧？

没有奇怪的css，它只是从{右：-100％切换;到{右：0;你可以看到我的困惑。

请在此处查看：http://and-rew.com/work/honeybucket

将您的设备连接到计算机并使用Safari的移动检查程序，您将看到类的切换，但页面没有可视化更改。

仅供参考，这里有一张图片来证明toggleClass正在运作：

未点击的菜单按钮（在页面右侧，两个内衬的SVG）：

Unclicked

单击按钮并切换类：

Toggled Class with no change

一些代码供参考，首先是标题的标记：

header role="banner" id="page-header">
    <a class="and-brand" href="/">
        <?php include (TEMPLATEPATH . '/images/and-brand.svg'); ?>
    </a>
    <nav id="site-nav" role="navigation">
        <?php    
            $defaults = array(
            'theme_location'  => 'menu-1',
            'container'       => false, 
            'container_class' => false, 
            'echo'            => false,
            'fallback_cb'     => false,
            'items_wrap'      => '%3$s',
            'depth'           => 0
            );
            echo strip_tags(wp_nav_menu( $defaults ), '<a>');
        ?>
    </nav>
    <a id="menu-button" aria-label="Click to open/close navigation." href="javascript:void(0)">
        <?php include (TEMPLATEPATH . '/images/_svgs/nav_menu.svg'); ?>
    </a>
</header>

执行切换的JS函数（在桌面上正常工作）：

// Nav Slide Out Menu
var $header = $('#page-header'),
    $menuButton = $('#menu-button'),
    $navWrap = $('#site-nav');

$menuButton.click(function()
    {
        $header.toggleClass('menu-open');
        $menuButton.toggleClass('active');
        $navWrap.toggleClass('open');
        return false;
    }
);

网站导航的scss没有弹出（我的媒体查询有奇怪的名字，我知道）：

#site-nav {
display: block; height: 100%; margin: 0 0; padding: 6.7357em 2.5em 0 2.5em; position: fixed; top: 0; right: -100%; background: rgba(0,0,0,.85); z-index: 9000;
@include bp(lil-crustin) {
    width: 100%; transition: $cubic250;
}
@include bp(young-crustin) {
    width: 12em; transition: $cubic500;
}
&.open {
    right: 0;
}
a {
    @include bp(lil-crustin) {
        display: block; width: 100%; margin: 0 auto .3125em; padding: .6125em 0; float: left; position: relative; font: normal .88em/100% 'soleil', sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: $white; z-index: 9999; transition: $cubic150;
    }
    @include bp(young-crustin) {
        margin: 0 auto; text-align: left;
        &::after {
            content: ''; display: block; width: .30625em; height: .30625em; float: left; background: $white; border-radius: .153em; position: absolute; top: 12px; left: 0; opacity: 0; transition: $cubic150;
        }
        &:hover {
            padding: .6125em 0 .6125em .6125em;
            &::after {
                opacity: 1;
            }
        }
    }
}

整个页面标题都有一堆scss，但它并不是真正必要的IMO。如果你想要它，就问问。

谢谢大家。

Answer 1

不确定我做了什么CSS明智地解决它，但它现在工作正常。我认为它只是iOS上的safari。

即使课程正在切换，网站导航也无法在iOS Safari中打开

1 个答案: