Question

菜单图标不会切换画布菜单。单击时，它会像往常一样更改内容部分的不透明度，但不会滑动以显示菜单。

我的导航适用于我的电脑和Mac上的所有浏览器，iPhone上和我的Android三星S4上的Chrome浏览器，但不是它的股票“互联网”浏览器（三星浏览器2.1）而且它很奇怪因为我刚创建了另一个网站类似的Foundation 5 off-canvas菜单工作正常。还有其他人经历过这个吗？

这是一个wordpress网站。我的header.php：

<!doctype html>
<html class="no-js"  <?php language_attributes(); ?>>
<head>
    <meta charset="utf-8">
    <!-- Force IE to use the latest rendering engine available -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta class="foundation-mq">
    <!-- If Site Icon isn't set in customizer -->
    <?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) { ?>
    <!-- Icons & Favicons -->
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-icon-touch.png" rel="apple-touch-icon" />
            <!--[if IE]>
                <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
                <![endif]-->
                <meta name="msapplication-TileColor" content="#f01d4f">
                <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/assets/images/win8-tile-icon.png">
                <meta name="theme-color" content="#121212">
                <?php } ?>
                <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
                <?php wp_head(); ?>
                <!-- Drop Google Analytics here -->
                <!-- end analytics -->
</head>
<body <?php body_class(); ?>>

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

        <!-- Mobile Menu -->
        <div class="off-canvas position-right" id="off-canvas" data-off-canvas data-position="right">
            <?php joints_off_canvas_nav(); ?>
        </div>

            <div class="off-canvas-content" data-off-canvas-content>

                <header class="header row" role="banner">
                    <!-- Secrest of the Horse Logo -->
                    <div class="small-6 column">
                        <h1 class="soth-logo float-left">
                            <a href="<?php echo home_url(); ?>"><?php bloginfo('title'); ?></a>
                        </h1>
                    </div>
                    <!-- add main sponsor on right -->  
                    <div class="small-6 column float-right">
                        <?php get_sidebar( 'main-sponsor' ); ?>
                    </div>
                </header> <!-- end .header -->

                <nav role="navigation">
                    <div class="top-bar" id="top-bar-menu">

                    <!-- Centered Desktop Menu Bar -->
                    <section class="top-bar-section show-for-large">
                        <?php //see assets/functions/menu.php
                        joints_top_nav(); ?>    
                    </section>

                    <!-- Mobile Menu Icon -->
                    <div class="top-bar-right hide-for-large">
                        <ul class="menu">
                            <li><a id="list-icon" data-toggle="off-canvas"><i><div class="fi-list"></div></i></a></li>
                        </ul>
                    </div>

                    </div>
                </nav> <!-- end .top-bar -->

Answer 1

$(window).on('resize', function (ev) { ev.preventBubble(); });

为我工作，你可能想要自定义它，这样就不会阻止所有调整大小事件的冒泡。

Zurb Foundation 6 off-canvas导航无法在Android互联网浏览器上运行

1 个答案: