0

我使用 bootstrapv4 导航，但是当我单击一个项目时，活动状态不会切换。我尝试了一些 js，但它们都没有工作。我正在使用 kirby 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");
    });
4

1 回答 1

0

You dont need Javacript for that in Kirby. You can use a helper like this within you foreach loop:

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

More Infos about the helpers and the isOpen-object: https://getkirby.com/docs/reference/templates/helpers https://getkirby.com/docs/reference/objects/page/is-open

于 2020-02-20T10:03:52.380 回答