个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
对于我缺乏编码知识，我深表歉意，因为我对网页设计还很陌生。我已经搜索了几天的解决方案，尝试了不同的方法，并意识到我需要帮助。
基本上我的代码被编程为在浏览器缩小时显示一个汉堡包图标，这工作得很好。我遇到的问题是，当我点击我的汉堡包图标时，下拉菜单不会显示。
当我一开始不添加该行时它曾经工作，但我的网站真的很慢而且滞后。添加该行后，我的 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 将解决您的问题。
您在设置文档类型后遇到这种情况的原因是因为这样做是将文档设置为以标准模式而不是怪癖模式呈现。在标准模式下，您必须为尺寸指定单位，在怪异模式下，浏览器假定为 px。
关于javascript - <!DOCTYPE HTML> 导致汉堡包导航栏 javascript 无法运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44471862/
25
4
0
有很多线程解释了选择什么 Doctype，但我找不到任何解释实际语法的线程。举个例子: 特别是: PUBLIC 是否可以替换为其他值，是什么意思？ 为什么 url 需要用引号括起来？ 是什么 ”-”
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我正在尝试制作 100% 高度的东西，但添加文档类型会破坏它。这在 other questions 上进行了解释. 然而，我发现了一些奇怪的事情——如果我关闭 doctype 标签(我知道你不应该这样
美好的一天， 我正在开发一个 C# Web 应用程序，一切正常，直到我添加普通的 JavaScript。 html代码如下: JScript.js是放入的 JavaS
我有一个主要的框架集页面，它使用 FRAMESET 文档类型..现在它里面有 3 个框架.. 现在对于第 2 帧，我想使用一些 HTML5 代码 ()...所以我想我必须使用 doctype 现在我的
我正在制作一个网页，我即将完成，所以我决定通过一个 html 验证器来验证它，但我的页面出现了一堆错误。我的页面目前适用于 ...但是当我输入 我页面的间距中断。 示例:工作时的图片 代码: 当我添
我刚刚在 W3C 验证器上检查了我的个人登陆页面以确保它是正确的 HTML5，然后发现我需要 而不是 通过。 但是背景图片不会延伸到底部。我已经尝试了 wrapper 的最小高度，并清除了，但似乎没有
这是文档类型所在的文件: Taekwendo tinymce.init({ selector: '#art
这是我的问题的 html 代码 Insert title here var arr = [ "A", "B", "C" ]; for (var i = 0; i 在
我在抓取一些具有多个 声明的网站时遇到了困难。 。 我正在使用带有 requests 的 Python 2.7.9 和来自 bs4 的 BeautifulSoup。当我执行 requests.get
我刚刚在 Windows Server 2008 上创建了一个新的 IIS 网站，以便使用它来部署新网站。 该网站仍然是空的。 如果我尝试在“管理工具”下打开 IIS Web 平台安装程序，则会遇到错
是否有使用 HTML 5 文档类型的专家 ，即使我没有使用任何新的 HTML 5 标签？即使我没有使用任何新的 HTML 5 标签，用 HTML 5 文档类型替换 XHTML 文档类型有什么好处吗？
假设我想将旧网站更改为“HTML5”风格。简单地更改标题是否安全 doctype如下？ 原始文档类型可能是: 或 如果改为不可能破坏遗留网页的呈现方式，我认为它是安全的。 最佳答案 为什么是的，
通过在 windows 命令提示符下运行以下命令创建了一个全新的 express.js 项目 npm install express -g express newproject cd newproje
我懂了 DOCTYPE is disallowed when the feature "http://apache.org/xml/features/disallow-doctype-decl" se
这个问题在这里已经有了答案: background-color property doesn't work correctly with HTML5 DOCTYPE [duplicate] (1
我在没有使用 Doctype 的情况下构建了我的页面，但是没有它我可以获得我期望的结果。 即使用户尝试调整窗口大小时，我也尝试每行列出 4 张图像并填充页面。 问题是我最近添加了 Doctype，这里
我注意到我的一个 html 表单存在问题，文本输入字段被截断了。我将其原因缩小到我们在页面顶部使用的 指令。 当我排除 指令时，下面场景中的输入正确呈现，这意味着文本输入字段被完整绘制。但是当我按
我知道很多人在切换到 时遇到类似的问题行，然而，我已经尝试了所有的方法，甚至是经典的 html{height: 100%;} body {min-height: 100%;} 方法，以及其他方法，但
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to replace with in an html file 我在我的
我是一名优秀的程序员,十分优秀！