0

我有一个安装 SlickNav 的网站。我可以正确调用它，并且链接可以正常工作，但是它似乎不想在站点本身中进行初始化。我通过以下方式调用它：

  <link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
  <script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>

菜单代码如下：

<header>
<!-- Header Start -->
<div class="header-area">
    <div class="main-header ">
        <div class="header-top top-bg d-none d-lg-block">
            <div class="container">
                <div class="col-xl-12">
                    <div class="row d-flex justify-content-between align-items-center">
                        <div class="header-info-left">
                            <ul>
                                <li>1234567890</li>
                                <li>mta360seo@gmail.com</li>
                            </ul>
                        </div>
                        <div class="header-info-right">
                            <ul>
                                <li>Mon - Fri: 9:00 - 5:00</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom  header-sticky">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Logo -->
                    <div class="col-xl-2 col-lg-1 col-md-1">
                        <div class="logo">
                            <a href="index.html"><img src="/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-xl-8 col-lg-8 col-md-8">
                        <!-- Main-menu -->
                        <div class="main-menu f-right d-none d-lg-block">
                            <nav>
                                <ul id="navigation">
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Heating</a></li>
                                    <li><a href="#">Cooling</a></li>
                                    <li><a href="#">Press</a>
                                        <ul class="submenu">
                                            <li><a href="#">Blog</a></li>
                                            <li><a href="#">Releases</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Company</a>
                                        <ul class="submenu">
                                            <li><a href="#">Contact</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-3">
                        <!-- Header-btn -->
                        <div class="header-btn d-none d-lg-block">
                            <a href="#" class="get-btn">Quote</a>
                        </div>
                    </div>
                    <!-- Mobile Menu -->
                    <div class="col-12">
                        <div class="mobile_menu d-block d-lg-none"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Header End -->

有什么我想念的吗？它适用于我的本地测试，但是当我编译并尝试在实际站点上使用它时，它根本不想初始化。有什么我想念的吗？

这是一个使用 Sage 9 的 wordpress 站点，以防有助于诊断。

4

1 回答 1

0

您必须使用 Javascript 代码对其进行初始化。

您调用的第一个库是 CSS slicknav 库和 JS slicknav 库。您还需要加载 jQuery 以使 slicknav 正常工作。

因此，在开始时将其添加到您的代码中：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

$(document).ready(function(){

$('#menu').slicknav({

// Label for menu button. 
// Use an empty string for no label.
'label' : 'MENU', 

// If true, the mobile menu is a copy of the original.
'duplicate': true, 

// The duration of the sliding animation.
'duration': true, 

// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //

});

});

您还需要为<ul>元素指定一个 ID“菜单”，如下所示：

<ul id="menu">
<li>...</li>
</ul>

最后，确保您的 HTML 标记遵循 slick nav 的指定结构，即：

<ul id="menu">
<li>Home
<ul>
<li><a href="#">Blog</a></li>
<li>Plugins
<ul>
<li><a href="#">Latest</a></li>
<li><a href="#">Most Popular</a></li>
<li><a href="#">Recommended</a></li>
</ul>
</li>
<li><a href="#">Publishing</a></li>
</ul>
</li>
<li><a href="#">Top <a href="#">Menu</a> 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</li>
</ul>

更多信息：https ://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html

于 2020-10-13T19:55:55.730 回答