如何執行操作：“如果 resize() 函式”，如果 Width < 990 且 .close 類不存在（nav class=sidebar），否則如果 Width < 990 且 .close 存在則不執行操作（nav class=sidebar close ）。
請理解，因為我是 javascript 的新手。下面是示例代碼，我不能只使用 css，因為完整的代碼有許多其他 css 元素，這使得不可能用 css 做所有事情，我想使用 javascript 的替代方法。我已經感謝您的幫助。
我需要 javascript 來識別 .close 類，如果它被激活則什么也不做，如果它沒有激活并且螢屏小于 990px??，那么執行一個函式來添加 .close，這樣 .sidebar 會自動減小大小到無需使用單擊文本“關閉選單單擊”即可回應。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: red;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
background: yellow;
width: 80px;
}
.home-section{
position: relative;
background: #E4E9F7;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 80px;
width: calc(100% - 80px);
}
.textClose{
cursor: pointer;
}
</style>
<body>
<nav >
<ul>
<li>Menu 01</li>
<li><a href="#">Menu 02</a></li>
<li><a href="#">Menu 03</a></li>
</ul>
</nav>
<section >
<div >
<span >Close Menu Click</span>
</div>
<br>
Body Home...
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".textClose");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});
document.addEventListener("DOMContentLoaded", function(event) {
var element = document.querySelector('.sidebar');
function resize() {
if (window.innerWidth < 990 ) {
element.classList.add('close');
} else {
element.classList.remove('close');
}
}
window.onresize = resize;
window.onload = resize;
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
如果我理解正確，你想要這個：
if (window.innerWidth < 990 && element.classList.contains('close') === false)
編輯：
應該沒有回圈了：
if (window.innerWidth < 990 && element.classList.contains('close') === false) {
element.classList.toggle("close");
}
JSFiddle：https ://jsfiddle.net/9zLfwg0h/5/
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463901.html
標籤：javascript css