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');
    });
})

CSS上的color属性使条形图不显示，只是将其设置为另一种颜色（color:#000;）或只是将其取下即可。

还要确保在HTML代码上链接了jQuery库。

JSFiddle DEMO

响应式导航栏不会显示

1 个答案: