作为CSS和HTML的初学者，我正在使用Flexbox构建一个网站。具体来说，我正在尝试创建一个Flexbox导航栏，它可以响应各种屏幕尺寸，包括移动的设备。
不幸的是，我的JavaScript代码遇到了问题，因为当我尝试单击菜单时，菜单似乎无法在移动的设备上正常工作。请参见下图：
我只是需要帮助确定我的代码中存在的缺陷，并将非常感谢伴随反馈的解释。您也可以在CODEPEN上查看
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navlist');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.logo {
width: 110px;
cursor: pointer;
}
body {
background-image: url(images/backgroundimg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
a {
color: black;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.nav_links li{
display: inline;
padding: 0 15px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #F0F0F0;
}
button {
padding: 9px 25px;
background-color:rgba(241,246,249,1);
border: none;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color:rgba(241,246,249,0.8);
}
.menu {
display: none;
}
.menu-line {
width: 20px;
height: 3px;
background-color: black;
margin-bottom: 3px;
}
@media (max-width: 760px) {
.menu {
display: block;
position: absolute;
top: 20px;
right: 10px;
}
.nav_links li {
display: block;
}
header {
flex-direction: column;
padding: 30px 0;
}
.logo {
position: absolute;
top: 20px;
left: 10px;
}
nav {
padding-top: 15px;
width: 100%;
}
.nav_links li {
padding: 15px 0;
border-top: 2px solid white;
text-align: center;
display: none;
}
button {
width: 100vh;
padding: 15px 0;
transition: none;
display: none;
}
.active {
display: block;
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navbar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img class="logo" src="#" alt="MyLogo" >
<nav>
<ul class="nav_links" id="navlist">
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact Us</button></a>
<div class="menu" id="toggle-menu">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</header>
</body>
2条答案
按热度按时间wvt8vs2t1#
你的代码做了预期的事情，然而，这是我从你的代码中发现的两个问题：
**Html Closure：**你的img缺少一个闭包，导致DOM结构出现问题
**Media query中的样式：**您有适用于移动的的CSS规则。有一个规则导致链接不出现
另外，仅供参考，似乎前面的一行是将
display:block添加到这个选择器中，所以我的建议是你看看你的css结构。防止这种情况的一种方法是使用css编译器，如SASS或SCSS，这将有助于防止这种对相同选择器的双重分类。问候
uujelgoq2#
您正在
ul上的active类与navlist类之间进行切换，但是您在li上添加了diplay:none。这是你的问题。我在代码中添加了我所更改的注解：