基础6 Wordpress主题

Question

我正在尝试添加一些动画到移动导航缓慢下降，而不是让页面跳转。我用的是基础新闻的主题。我似乎无法让它与数据-动画一起工作。这是我的代码片段：

<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>

Answer 1

我没有在您的代码片段中看到实际的“移动菜单”组件，所以不能100%确定这里发生了什么，但是要注意的是，您需要在数据的相同元素上设置数据动画属性--toggler属性(在本例中是正在切换的东西，或者“移动菜单”)。参见这里的示例：http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation

Answer 2

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

还检查是否将data-toggler属性添加到元素中。