Question

大家好日子。我希望你能解决我的问题。我正在和一所名为UNISA的大学一起学习SLP课程，目前我正在学习的是如何使用名为Slicknav的插件制作移动菜单。但是，我无法让它工作。每当我按照网站要求进行操作时，我的网页都没有做任何事情。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Experimentation</title>
<link rel="stylesheet" href="Experimentation.css">
<link rel="stylesheet" href="slicknav.css"/>
<script src="jquery.slicknav.min.js">
    $(function(){
        $('#menu').slicknav();
    });
    </script>
<script>
    $(function(){
    $('#menu').slicknav();
});
</script>
</script>

</head>

<body>

<header>
    <img src="youtube-square-logo-3F9D037665-seeklogo.com.png" height="60px" width="80px" alt="youtube_logo" id="rightimg">
    <img src="youtube-square-logo-3F9D037665-seeklogo.com.png" height="60px" width="80px" alt="youtube_logo" id="leftimg">
    <h2>Youtubers</h2>
    <h3>Wiki</h3>
</header>





<nav id="nav_bar">

    <ul>

        <li><a href="">Home</a></li>
        <li><a href="#">PewdiePie</a></li>
        <li><a href="#">Markiplier</a></li>
        <li><a href="#">Jacksepticeye</a></li>
        <li><a href="#">More Youtubers</a></li>
    </ul>

</nav>






<aside id="youtubers">
    <h3>Most famous <br>Youtubers</h3><br>

    <h4>Pewdiepie</h4>
  <img src="http://images.techtimes.com/data/images/full/214602/pewdiepieemmys.jpg" height="100px"/>
    <br><hr><br>
    <h4>Markiplier</h4>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/80/3d/56/803d568c2917e8a400c13325f146127d--the-guys-youtuber.jpg" height="150px"/>

    <br><hr><br>
    <h4>Jacksepticeye</h4>
  <img src="https://s-media-cache-ak0.pinimg.com/236x/98/35/88/98358846e093741f47afa06144d006f3--your-teacher-middle-fingers.jpg" height="100px" style="padding-bottom:2em;"/>



</aside>

<main>
    <h2>The job of youtubers</h2>

    <p>Since the start of Youtube, jobs known as content creatoris have risen to the surface, due to the existance of Youtube. By having ads played on the videos they upload, they are able to earn money simply by uploading videos. Many peopple have become famous because of this.</p> 
    <p>Some of the most well known of these are people like Pewdiepie, Markiplier and Jacksepticeye. They record "Lets Plays" where they record themselves playing and reacting to a gems many twists and turns</p>

    <p>This has also earned a lot of controversey due to the fact that people cannot understand why people would watch a person play a game instead of playing it for themselves. There are many reasons for this. Often, people would rather play the games themselves, but various circumstances may prevent them from doing so. Lack of time, lack of cash. Another possibility is that it is even a game they would not enjoy playing, but simply seeing another person react to it can bring enjoyment to these people</p>


</main>

<aside id="importlinks">
    <h2>Youtuber links</h2>
    <ul>
        <li>Youtube</li>
        <li>Pewdiepie Channel</li>
        <li>Jacksepticeye Channel</li>
        <li>Markiplier Channel</li>
    </ul>





</aside>



<footer>

    <p>All rights co to their respective owners</p>

    <ul id="menu">

        <li><a href="#">Home</a></li>
        <li><a href="#">PewdiePie</a></li>
        <li><a href="#">Markiplier</a></li>
        <li><a href="#">Jacksepticeye</a></li>
        <li><a href="#">More Youtubers</a></li>
    </ul>
</footer>

</body>
</html>

该网站只是我创建的网站，用于测试我学到的所有内容，因此请尽量使用文档中的所述内容。我希望你能帮助我解决这个问题，因为这会让我感到沮丧！

Answer 1

Jquery问题：

好像你缺少对JQuery的引用。

<script src="https://code.jquery.com/jquery-3.2.1.min.js" Integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

一些建议：

我建议您在< body >标记的底部放置脚本（，顺序正确）：

<script src="https://code.jquery.com/jquery-3.2.1.min.js" Integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="jquery.slicknav.min.js" />
<script>
    $(function(){
        $('#menu').slicknav();
    });
</script>

请记住，如果slicknav依赖于Jquery，则需要将其包含在页面中。

祝你好运。

PS：也在UNISA。

Answer 2

您缺少jquery lib文件。在SlickNav js文件之前包含它。事情将开始奏效。出于样式目的，您还可以使用SlickNav css 文件。

美好的一天！

Slicknav的移动菜单问题

2 个答案:

Jquery问题：