个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我制作了响应式菜单。在桌面上，导航在标题中水平显示:主页、图库、关于等。对于较小的屏幕，我制作了汉堡包图标，单击后，导航应展开。使用 CSS，我在较小的屏幕上隐藏了导航，并对其展开时的外观进行了样式化 - 它将垂直显示。
使用 javascript，我创建了一个函数，当您单击汉堡包图标时展开导航，并在再次单击时折叠导航。
它有效。
问题是:如果我单击汉堡包图标显示导航，然后再次隐藏它，当我将浏览器窗口放大到桌面大小时，导航将不会再次在标题中水平显示，它仍然隐藏。
请帮忙!
$('#drawer').click(function() {
$('header nav').toggle(1);
if ($(this).text() == 'Hide') {
$(this).text('Show');
} else {
$(this).text('Hide');
}
}); #drawer {
display: none;
}
header nav {
float: right;
}
nav li {
float: left;
}
@media screen and (max-width: 768px) {
#drawer {
display: inline-block;
float: right;
}
header nav {
display: none;
float: none;
padding-top: 120px;
/* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
text-align: center;
}
nav li {
float: none;
}
nav li a {
display: inline-block;
margin-left: 0px;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="drawer" src="images/drawer.png" alt="Drawer">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</nav>最佳答案
你是我在这里帮助的第一个人，所以我希望我能说清楚这一点，并且这是有实际帮助的。
我相信您的问题在于使用toggle()。此函数将向您的导航元素添加内联样式，如果不使用 !important，则无法使用 CSS 覆盖这些样式。
我已经使用toggleClass()组合了一个解决方案，它不会添加任何内联样式，而是应用一个类来显示您的导航元素，同时仍然允许使用媒体查询的相反效果进行覆盖。我还想补充一点，我并不真正建议使用纯粹执行 display: block 的类，但它说明了这一点。
<!DOCTYPE html>
<html>
<head>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
#drawer {
display: none;
}
header nav {
float: right;
}
nav li {
float: left;
}
@media screen and (max-width: 768px) {
#drawer {
display: inline-block;
float: right;
}
header nav {
display: none;
float: none;
padding-top: 120px; /* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
text-align: center;
}
nav li {
float: none;
}
nav li a {
display: inline-block;
margin-left: 0px;
margin-top: 10px;
}
}
.display {
display: block;
}
</style>
</head>
<body>
<header>
<img id="drawer" src="images/drawer.png" alt="Drawer">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</nav>
</header>
<script>
$('#drawer').click(function() {
$('header nav').toggleClass('display');
if( $(this).text() == 'Hide' ) {
$(this).text('Show');
} else {
$(this).text('Hide');
}
});
</script>
</body>
</html>
我希望这有用，并感谢您成为我的 stackoverflow 豚鼠。
关于javascript - 适用于较小屏幕的汉堡菜单，包括 JavaScript/jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48962405/
24
4
0
127.0.0.1:8000/api/仅包含来自第二个应用程序的 url，但我将两个 url 模块链接到相同的模式。甚至有可能做到这一点吗？ 第一个应用程序: from django.urls imp
我目前正在学习 ColdFusion。我有 PHP 背景，对此我有点困惑。 我有一个选择菜单，我希望将选项保存在不同的文件中。 (例如 options.cfm)当我调用文件时，我想在选择菜单中包含选项
字符串: "75,000", "is", "95%", "or", "95/100" "of", "monthly", "income" o/p: "is","%, "or", "/", "of",
我有 4 个 javascript 文件(每个文件对应一个 HTML 文件)，所有 4 个文件中的 3 个函数都是相同的。我想找到一个顺利的解决方案，我可以以某种方式分别包含这 3 个函数...是否可
我在 PHP 中有这种情况，其中 include在一台服务器上被遗漏，但在另一台服务器上没有(我没有设置服务器，所以我不能告诉你更多；我不是真正的 devops 人，所以这就是我在这里问的原因)。两台
这是一个模式文件，midi.xsd定义类型，note ，用于存储 MIDI 音符值: 这是另一个模式文件，octaves.xsd使用
我想备份以下文件夹 /home /etc /usr/local /root /var /boot 并排除 /var/tmp /var/run /var/lock /home/*/.thumbnails
如何重新编码具有许多值(包括缺失值)的数值变量，以获得数字 0:n-1哪里n是唯一值的数量，包括 NA ，整齐？ 例子: df 1 1000 0 2 1000 0 3 N
选择元素的 html(包括在内)的最佳方法是什么？例如: This is just a test. 而$('#testDiv').html()返回"This is just a test."
我正在尝试设置Varnish来处理本地环境中的ESI包含。 我在虚拟机中运行 Varnish ，内容在主机上运行。 我有两个文件“index.html”和“test.html”。它们都存储在apach
我有以下内容，并且想要检索“ FromEmail”不为空的数据 Simple email@gma
欧海，我正在编写一个小型 PHP 应用程序，使用一个单独的 config.php 文件和一个functions.php，其中包含我将在应用程序中使用的所有自定义函数。现在，我真的必须在每个函数中包含
我知道可以将 JavaScript 放在一个特定的 .js 文件中，然后通过执行以下操作将其包含在任何页面中...... 我注意到，对于包含的这些 .js 文件: 它们实际上不必以 .js 结尾 其
我使用 gwt UIBinder 添加了一些项目到我的 ComboBox。 --select one-- Dispute Referral Form Dispute Settlement Clause
我可以将一个 first.c 文件包含到另一个 second.c 中吗？ (我正在做一些套接字编程，以将服务器收到的消息存储在链接列表中，因此在第一个程序中，我尝试保留链接列表和第二个程序套接字编程文
我有一个简单的 Spring MVC 数据项目设置，我试图选择 Admin 中尚不存在的用户列表。 table 。这是我的存储库方法 SELECT u FROM User u WHERE u.id N
在 bash 脚本中，使用什么实用程序以及如何删除两个字符串之间的文本，包括字符串。 原文: (ABC blah1)blah 2(def blah 5)blah 7)(DEF blah 8)blah
我有这个 BST 问题，我试图用 Java 解决，但我不知道为什么它不起作用。问题是: 二叉搜索树 (BST) 是一种二叉树，其中每个值节点大于或等于该节点的所有节点中的值左子树并且小于该树中所有节点
我有一个字符串，其中包含“Dollars”和“Cents”符号。我想删除它们。我试过了 string.replaceAll("[\"\\u00A2\" $]", "") 但它不起作用。正确的做法是什么
我在 stories 和 tags 之间有一个多对多的关系，为保存关系而创建的表是 taxonomies。我想搜索所有具有所有给定标签的故事。 到目前为止我使用的查询是这个，当然它对我不起作用，它返回
我是一名优秀的程序员,十分优秀！