<！DOCTYPE HTML> 导致汉堡导航栏 JavaScript 不起作用

我很抱歉我缺乏编码知识，因为我对网页设计相当陌生。我已经寻找解决方案好几天了，尝试了不同的方法，并意识到我需要帮助。

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

当我一开始没有添加行时，它曾经工作过，但我的网站真的很慢而且滞后。添加该行后，我的 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 将解决您的问题。

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

相关内容

最新更新

热门标签：