我有一个侧边栏,它在桌面 View 上使用 javscript 滑出 250 像素。当涉及到移动 View 时,我希望侧边栏占据 100% 的宽度。我正在尝试在 Javascript 中使用媒体查询,但无论我做了什么更改,它似乎都覆盖了桌面 View 侧边栏的样式。
HTML
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
</div>
<div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
<a href="#home">Home</a>
<a href="#about-me">About</a>
<a href="#my-skills">Skills</a>
<a href="#my-portfolio">Portfolio</a>
<a href="#contact-me">Contact</a>
</div>
</nav>
CSS
.navbar {
height: 100%;
width: 0;
position: fixed;
background: #141313;
}
.navbar .sidemenu-btn {
font-size: 2.5rem;
padding: 3rem 0;
text-align: center;
margin-left: 1rem;
cursor: pointer;
color: #141313;
}
.navbar .navbar-items {
display: flex;
flex-direction: column;
text-align: center;
display: none;
margin-left: 1rem;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
@media screen and (max-width: 768px) {
.navbar {
position: relative;
}
}
JS
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
toggleBtn.addEventListener("click", mediaQuery);
function sideMenu() {
if (toggleNav.style.width === "250px") {
toggleNav.style.width = "0px";
} else {
toggleNav.style.width = "250px";
}
}
function mediaQuery() {
const x = window.matchMedia('(max-width: 768px)');
const y = document.querySelector('.navbar');
if (x.matches && y.style.width === "100%") {
y.style.width = "0px";
} else {
y.style.width = "100%";
}
}
最佳答案
媒体查询可以完成这项工作。您不需要 js 来更改 navbar-items
的宽度。看到这个
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
height: 100%;
width: 100%;
position: fixed;
}
.sidemenu-btn {
font-size: 2.5rem;
padding: 0;
text-align: center;
cursor: pointer;
color: green;
position: absolute;
right: 20px;
top: 20px;
}
.navbar-items {
display: flex;
flex-direction: column;
text-align: center;
width: 250px;
height: 100%;
padding-left: 1rem;
background: #141313;
transition: all .5s ease;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
@media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
.navbar.open .navbar-items {
width: 0;
}
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
Toggle
</div>
<div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
<a href="#home">Home</a>
<a href="#about-me">About</a>
<a href="#my-skills">Skills</a>
<a href="#my-portfolio">Portfolio</a>
<a href="#contact-me">Contact</a>
</div>
</nav>
只需添加媒体查询就可以改变元素的宽度,无需在js中 checkin
@media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
添加一个 .open
类,该类将添加到 .navbar
上并将触发转换
.navbar.open .navbar-items {
width: 0;
}
你的 js 现在被简化了
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}
关于javascript - 为什么我的边栏媒体查询不能在 Javascript 中运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55584848/