<!DOCTYPE HTML> 导致汉堡导航栏 javascript 不起作用

jasim 发表于 Dev

贾西姆

我为我缺乏编码知识而道歉，因为我对网页设计还很陌生。我已经搜索了几天的解决方案，尝试了不同的方法，并意识到我需要帮助。

基本上我的代码被编程为在浏览器缩小时说明一个汉堡包图标，这非常好。我遇到的问题是，当我单击我的汉堡包图标时，不会显示下拉菜单。

当我一开始没有添加该行时，它曾经可以工作，但是我的网站非常缓慢且滞后。添加该行后，我的 javascript 根本不起作用，我迷路了。

这是我的 html、css 和 js 代码：

$('.hamburger').on('click', function () {
 if ($('.menu').hasClass('open')) {
   $('.menu').removeClass('open');
 } else {
   $('.menu').addClass('open');
}
});

@media only screen and (max-width: 768px) {

  .hamburger {
    cursor: pointer;
    padding: 30px;
    display: block;
  }

  .line {
    border-bottom: 5px solid #fff;
    width: 35px;
    margin: auto;
    margin-bottom: 6px;
  }
  
  .line:last-child {
    margin-bottom: 0;
  }
  
  
  /* Our styles here */
#nav li {
width: 100%;
border-bottom: 1px solid white;
text-align: center;
border-top: 1px solid white;         
border-bottom: none;
background: rgba(204, 204, 204, 1);
}

.menu {
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
margin: 0;
padding: 0;
margin-top:-14;
}

.open {
    height: 255;
}

<!DOCTYPE HTML>
<body>
<div id="nav">
      <div href="#" class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
   <ul class="clearfix menu">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
</body>

如果我需要提供更多信息，请留言！！

自由女神

您给出ul.open了高度，255但浏览器需要知道单位（px/em/rem 等）。将此设置为255px将解决您的问题。

您在设置 doctype 后遇到这种情况的原因是因为这样做是因为您将文档设置为以标准模式而不是怪癖模式呈现。在标准模式下，您必须指定尺寸单位，在 quirks 模式下，浏览器假定为 px。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。