Question

我使用javascript创建了一个响应式汉堡菜单，这似乎可以正确触发，唯一的问题是，尽管“打开”了菜单（尽管存在于Chrome Inspector中），但下拉菜单和锚点是完全不可见的（即我在检查器中选择了一个列表项/锚元素，该区域应该高亮显示，但是这里什么也没有！）

我认为这可能是下一个隐藏元素的容器中的图像/文本，但是我制作了一个仅包含nav元素的全新.html文件，当我在浏览器中查看它时，同样的问题。

@media only screen and (max-width: 660px) {
    
    .icon {
        display: inline-block;
        color: black;
        position: absolute;
        right: 2rem;
        
    }
    
        nav {
        position: relative;
        height: 4rem;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 4rem;
        left: 0;
        background-color: #63B4C9;
        width: 100%;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    
    .nav-links li a {
        display: block;
        padding: 0.5rem;
        text-align: center;
    }

}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arapey|Homemade+Apple|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Starter Files</title>
</head>
<body>
  <nav id="theNav" class="nav">
    <img src="images/logo.svg" class="logo">
     <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
    <ul class="nav-links">
      <li><a href="#">Classes</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Planting Info</a></li>
      <li><a href="#">Contact</a></li>
    </ul>     
  </nav>


      <script>

  $(".icon").click(function(){
    $(".nav-links").slideToggle();    
  });

  </script>
</body>

JavaScript汉堡包菜单触发但不可见？

0 个答案: