Question

我使用bootstrapv4导航，但是当我单击某个项目时，活动状态不会切换。我尝试了一些js，但都没有用。我正在使用柯比cms，但我不认为这会引起任何问题。使用<?php snippet('header')?>会造成麻烦吗？还是我设置错误？

这是我的header.php

    <header>
        <nav class="navbar fixed-top navbar-expand-lg pl-3 pr-3 pl-lg-5 pr-lg-5">
            <div class="logo-container">
                <a class="logo-link" href="<?= $site->url() ?>"><?php if($image = $site->image('logo.png')): ?>
                        <img class="logo-image mr-5" src="<?= $image->url() ?>" alt="logo"><?php endif ?>
                </a>
            </div>
            <button class="navbar-toggler pt-0" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleFunction(this)">
                <div class="navbar-toggler-icon">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
            </button>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <?php $menuCounter=0;
                    foreach ($site->children()->listed() as $subpage):
                        $menuCounter++;
                        $class = ($menuCounter == 1) ? "active" : "inactive";
                        $span = ($menuCounter == 1) ? "<span class='sr-only'>(current)</span>" : "";
                        ?>
                        <li class="<?php echo $class ?> nav-item">
                            <a class="menu-point nav-link" href="<?= $subpage->url() ?>"><?= $subpage->title() ?><?= $span ?></a>
                        </li>
                    <?php endforeach ?>
                </ul>
                <ul class="navbar-nav nav-flex-icons nav-icons">
                    <li class="nav-item">
                        <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"><i class="fab fa-soundcloud"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"><i class="fab fa-youtube"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

这是我的js文件

$(".nav-item").on("click", function(){
        $(".nav-item").find(".active").removeClass("active");
        $(this).addClass("active");
    });

Answer 1

在Kirby中，您不需要Javacript。您可以在foreach循环中使用这样的帮助器：

<li class="menu-item<?= r($subpage->isOpen(), ' active') ?>">

有关帮助程序和isOpen对象的更多信息： https://getkirby.com/docs/reference/templates/helpers https://getkirby.com/docs/reference/objects/page/is-open

Bootstrap 4导航活动链接状态

1 个答案: