Umbraco активный элемент в Navbar не работает - PullRequest
Новая
       19

Umbraco активный элемент в Navbar не работает

0 голосов
/ 03 мая 2019

В настоящее время я работаю над приложением, и я обнаружил, что активный статус выбранного представления на панели навигации важен для дизайна.

Пока что мне не удалось заставить его работать, в настоящее время я пытаюсь запустить мой скрипт из моего main.js, если я запускаю его на моем видении, он говорит

Uncaught ReferenceError: $ is not defined at (index):69

Такое ощущение, что либо мой скрипт не работает, либо мой скрипт вообще не запускается, я не могу сказать, какой он есть

Navbar 

<nav class="navbar navbar-expand-lg navbar-light bg-light bd-navbar">
    <div class="container">
        <a class="navbar-brand" href="/default.aspx"><img src="@Model.Content.Icon.GetCropUrl("brandLogo")" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item dropdown">
                    <a class="nav-link active" href="@Model.Content.Url" aria-haspopup="true" aria-expanded="false">
                        @Model.Content.Name
                    </a>
                </li>

                @foreach (var item in Model.Content.Children)
                {
                    if (item.Children.Any() && !item.Name.Equals("Protected"))
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @item.Name
                            </a>
                            <ul class="dropdown-menu">

                                @foreach (var page in item.Children)
                                {
                                    if (Umbraco.MemberHasAccess(item.Path))
                                    {
                                        <li>
                                            <a class="dropdown-item" href="@page.Url" aria-haspopup="true" aria-expanded="false">@page.Name</a>
                                        </li>
                                    }
                                }

                            </ul>
                        </li>
                    }
                    else
                    {
                        if (Umbraco.MemberHasAccess(item.Path) && !item.Name.Equals("Protected"))
                        {
                            <li class="nav-item">
                                <a class="nav-link" href="@item.Url" aria-haspopup="true" aria-expanded="false">@item.Name</a>
                            </li>
                        }
                    }
                }
                @if (!Umbraco.MemberIsLoggedOn())
                {
                    <li class="nav-item">
                        <a class="nav-link" href="/protected/login/" aria-haspopup="true" aria-expanded="false">Login</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        @Html.Partial("/Views/Partials/Root/Login/LoginStatus.cshtml")
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>

Сценарий 

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

Master.cshtml 

    </footer>
        <script src="~/assets/js/jquery-3.0.0.min.js"></script>
        <script src="~/assets/js/popper.min.js"></script>
        <script src="~/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript" charset="utf8" 
        src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"> 
        </script>
        <script src="~/assets/js/smoothscroll.js"></script>
        <script src="~/assets/js/jquery.appear.js"></script>
        <script src="~/assets/js/main.js"></script>
</body>

1 Ответ

1 голос
/ 03 мая 2019

Так что это не проблема Umbraco, проблема в том, что вы пытаетесь запустить этот скрипт до включения JQuery (при условии, что он вообще включен). Если вы используете какую-то компоновку в этом представлении, вы можете ссылаться на JQuery перед телом, а затем запустить скрипт в представлении. Если вы предпочитаете, чтобы он был в вашем файле main.js, убедитесь, что вы ссылаетесь на этот файл main.js в своем представлении после ссылки на JQuery (или в ваши пакеты, если вы связываете свои скрипты).

Если вы еще не используете JQuery в своем проекте, это может помочь

...