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将解决您的问题。

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

导致汉堡包导航栏javascript无法正常运行

1 个答案: