响应式导航栏不会显示

Question

解决了 我已经创建了一个自定义的导航栏，我决定对其进行响应。但是，当我单击小“栏”图标时，响应性导航栏将不会显示吗？源代码：https : //jsfiddle.net/spoktry9/  <nav>    <div class="toggle">        <i class="fas fa-bars menu" aria-hidden="true"></i>     </div>    <ul>      <li><a href="index.html" class="active">Home</a></li>      <li><a class= "menu" href="menu.html">Menu</a></li>      <li><a class= "info" href="info.html">Info</a></li>      <li><a class= "reserve" href="reserve.html">rReserve</a></li>          <li><a class= "pics" href="pictures.html">Pictures</a></li>      <li><a class= "contact" href="contact_index.html">Contact</a></li>        <div class = "login">    <a href="login.html"><img src="img/login.png" heigt= "75" ;></a>  </div>    </ul>  </nav>

Answer 1

您在jQuery上有解析错误：

$(document).ready(function(){

    $('.toggle').click(function(){

        $('ul').toggleClass('active');

    }

}

它应该是 ：

$(document).ready(function(){

    $('.toggle').click(function(){

        $('ul').toggleClass('active');

    });

})

colorCSS上的属性使该栏不显示，只需将其设置为另一种颜色（color:#000;）或直接将其取下即可。

另外，请确保在HTML代码上链接了jQuery库。

JSFiddle演示