Question

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

>>> print zmq.Socket.send_pyobj.__doc__
Send a Python object as a message using pickle to serialize.

        Parameters
        ----------
        obj : Python object
            The Python object to send.
        flags : int
            Any valid flags for :func:`Socket.send`.
        protocol : int
            The pickle protocol number to use. The default is pickle.DEFAULT_PROTOCOL
            where defined, and pickle.HIGHEST_PROTOCOL elsewhere.
        
>>> print zmq.Socket.recv_pyobj.__doc__
Receive a Python object as a message using pickle to serialize.

        Parameters
        ----------
        flags : int
            Any valid flags for :func:`Socket.recv`.

        Returns
        -------
        obj : Python object
            The Python object that arrives as a message.

        Raises
        ------
        ZMQError
            for any of the reasons :func:`~Socket.recv` might fail

菜单代码如下：

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

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

这是一个使用Sage 9的wordpress网站，以帮助进行诊断。

Answer 1

您必须使用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标记遵循光滑导航的指定结构，即：

<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

如何修复SlickNav不初始化

1 个答案: