Question

我正在使用WordPress网站，使用ACF插件，我有两行导航。第一行<li>需要class="active"到第二行甚至出现。我可以让第一行显示为活动，或者第二行显示为活动，但不是两者。

为了让事情变得更有趣，没有可靠的方法来使用子页面进行计算（尝试过）。一些导航对象是父页面，我没有权力。

由于目标是使用模板，因此硬编码页面名称也不是一个选项..

我不得不去＆＃34;回去＆＃34;如果内部<li>被标记为活动，则在代码中。

ACF字段：

ACF具有名称，链接和子导航转发器的上部导航。和子导航转发器具有每个子页面的名称和链接。

在代码中，<li>标记内的<li>个标记使用ACF转发器进行迭代，并且有行。 $ lang_code用于计算从哪里拉标题文本。

<?php
$lang = get_locale();
$curr_page = get_permalink(); ?>


<nav role="navigation">
    <ul class="navigation">

    <?php if (have_rows('navigation', $lang_code)) :
        while(have_rows('navigation', $lang_code)) : the_row() ?>

            <li class="<?php  if($curr_page == get_sub_field('link') ){ echo 'active'; } ?>">
                <a href="<?php the_sub_field('link') ?>"> <?php the_sub_field('name') ?></a>
                <ul class="sub-navigation">

                    <?php if (have_rows('sub-navigation', $lang_code)) :
                    while(have_rows('sub-navigation', $lang_code)) : the_row() ?>

                        <li class="<?php if($curr_page == get_sub_field('link')){ echo 'active';  } ?>"><a href="<?php the_sub_field('link') ?>"><?php the_sub_field('name') ?></a></li>

                    <?php endwhile; //end sub while
                    endif; //end sub if ?>

                </ul>
            </li>

    <?php
        endwhile; // End navigation while
        endif; // End navigation if

    </ul>
</nav>

https://imgur.com/a/Ws8YA

图片，第一个：常见问题解答是class =＆＃34;有效＆＃34;，但由于支持不是，所以没有显示任何内容。第二张图是支持是class =＆＃34; active＆＃34;，显示第二行链接（支持活动，因为它们恰好是同一页面）。

我在导航栏中尝试了各种父迭代和计数器，但我仍然没有工作答案。

我正在考虑使用jQuery + PHP或类似的东西。

Answer 1

尝试使用jQuery：

$('.sub-navigation li.active').parents('li').addClass('active');

上面的代码将.active类添加到具有<li>类的孩子的父.active。

将活动类迭代到WordPress

1 个答案: