Foundation 6 WordPress 主题答案

【问题标题】：Foundation 6 Wordpress themeFoundation 6 WordPress 主题
【发布时间】：2016-11-27 18:37:59
【问题描述】：

我正在尝试向移动导航添加一些动画以缓慢下拉而不是让页面跳转。我正在使用foundationpress主题。我似乎无法使其与 data-animate 一起使用。这是我的代码 sn-p：

<div class="title-bar" data-responsive-toggle="site-navigation">
        <button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button>
        <div class="title-bar-title">

            <div class="mini-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;"></a>
            </div>
            <!--<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>-->
        </div>
    </div>

    <!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >-->
        <div class="top-bar-left">
            <ul class="menu">
                <li class="co-logo-top"></li>
                <!--<li class="home"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></li>-->
            </ul>
        </div>
        <div class="top-bar-right" >
            <?php foundationpress_top_bar_r(); ?>

            <?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
                <?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
            <?php endif; ?>
        </div>
    </nav>

【问题讨论】：

标签： wordpress zurb-foundation zurb-foundation-6

【解决方案1】：

我没有在您的代码 sn-p 中看到实际的“#mobile-menu”组件，所以不能 100% 确定这里发生了什么，但需要注意的是您需要有数据动画属性在与您的 data-toggler 属性相同的元素上（在这种情况下是被切换的东西，或“#mobile-menu”）。请参阅此处的示例：http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation

【讨论】：

【解决方案2】：

你试过用 jquery/js 触发它吗？看到这个线程：https://github.com/olefredrik/FoundationPress/issues/772。

还要检查您是否已将 data-toggler 属性添加到元素

【讨论】：