<!DOCTYPE HTML> 导致汉堡包导航栏 javascript 无法运行

Question

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

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

当我在开始时不添加该行时它曾经工作，但我的网站真的很慢而且滞后。添加该行后，我的 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>

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

Answer 1

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

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

<!DOCTYPE HTML> 导致汉堡包导航栏 javascript 无法运行

<!DOCTYPE HTML> causes hamburger nav bar javascript to not function

html

javascript

css

navbar

hamburger-menu