根據寬度隱藏div內容

Question

好吧，我正在嘗試制作一個響應式菜單...我已經有了網絡菜單結構，現在我正在研究移動菜單。 所述菜單必須占據整個屏幕，當我關閉它時，我所做的是通過過渡將其寬度減小到 0。 問題是只有 div 被縮小了，它的內容仍然存在......在這種情況下只有按鈕，顯然它稍后會有更多內容，但首先我希望那個按鈕在每次關閉時消失。

 //Variables let openMenu = document.getElementById('open_menu'); let contentMenu = document.getElementById('content_menu'); let iconsTopBar = document.querySelectorAll('.icon-top-bar'); let topBarWeb = document.getElementById('top_bar_web'); let topBarMobile = document.getElementById('top_bar_mobile'); let closeMenuMobile = document.getElementById('close_menu_mobile'); let mobileMenu = document.getElementById('mobile_menu'); //Functions openMenu.addEventListener('click',function(e) { contentMenu.classList.toggle('close-menu'); }); window.addEventListener("resize", function(){ iconsTopBar.forEach(icon => { if( window.innerWidth <= 1000){ if(icon.classList.contains('fad')){ icon.classList.remove('fad'); icon.classList.add('fas'); } }else{ if(icon.classList.contains('fas')){ icon.classList.remove('fas'); icon.classList.add('fad'); } } }); if( window.innerWidth <= 768){ contentMenu.classList.add('close-menu'); }else{ contentMenu.classList.remove('close-menu'); } showMenu(); }); window.onload = showMenu(); function showMenu(){ if( window.innerWidth <= 600){ topBarWeb.style.display = "none"; topBarMobile.style.display = "flex"; contentMenu.style.display = "none"; // this.alert('asdfas'); }else{ topBarWeb.style.display = "flex"; contentMenu.style.display = "flex"; topBarMobile.style.display = "none"; } } closeMenuMobile.addEventListener('click',function(e){ mobileMenu.style.width = "0vw"; mobileMenu.style.transition = ".5s"; // alert('sdfsd'); });

 @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root{ --bg-color: rgba(78, 78, 78, 0.1); --white:rgb(255, 255, 255); --blue: rgb(67, 140, 248); --gray: rgba(0, 0, 0, 0.6); --red: rgba(212, 34, 34, 0.797); --orange: rgb(255, 147, 74); --purple:rgb(222, 83, 155); --yellow:rgb(255, 238, 88); } /* width */::-webkit-scrollbar { width: 10px; } /* Track */::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } /* Handle on hover */::-webkit-scrollbar-thumb:hover { background: #555; border-radius: 3px; } * { padding: 0; margin: 0; } body { background: var(--bg-color); display: flex; }.content-menu { display: inline-flex; background: var(--white); width: 280px; height: 100vh; transition: 0.6s; }.content-body { width: 100%; height: 100vh; }.content-body.content-top-bar { display: block; padding: 10px; background: var(--white); top: 0; width: 100%; background-image: url('../img/cardinal/top-bar.png'); background-position: center; background-size: 50%; background-repeat: no-repeat; }.content-body.content-top-bar.top-bar { display: flex; }.content-body.content-top-bar.top-bar #open_menu { display: inline-flex; font-size: 25px; cursor: pointer; padding: 2px; color: var(--blue); width: auto; }.content-body.content-top-bar.top-bar.content-search-input { border: 1.5px solid var(--blue); margin-left: 20px; border-radius: 5px; background: var(--white); width: 35%; position: relative; }.content-body.content-top-bar.top-bar.content-search-input.search { padding: 2px 0 2px 10px; border: none; background: var(--white); color: var(--gray); width: 80%; outline: none; border-radius: 5px 0 0 5px; }.content-body.content-top-bar.top-bar.content-search-input button{ border: none; background: var(--white); padding: 2px 5px; border-radius: 0 5px 5px 0; color: var(--gray); position: absolute; right: 0px; }.content-body.content-top-bar.top-bar.icons{ display: flex; align-items: center; position: absolute; right:20px; color: rgba(48, 132, 222, 0.934); }.content-body.content-top-bar.top-bar.icons i{ padding: 5px 10px 5px 10px; font-size: 20px; cursor: pointer; position: relative; } /*EFECTO DE PULSO*/.circle { width: 7px; height: 7px; background: var(--red); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; }.circle::before, .circle::after { content:""; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 3px; height: 3px; border: 10px solid var(--orange); border-radius:100%; animation: latido linear 3s infinite; }.circle::after { animation-delay: -1.5s; } @keyframes latido { 0% { width:7px; height:7px; border:3px solid var(--orange); } 100% { width:20px; height:20px; border:5px solid transparent; } } #button-0 { top: 5px; left: 30px; } #button-1 { top: 5px; left: 25px; } /*END EFECTO PULSO*/.content-body.content-top-bar.top-bar.icons a{ text-decoration: none; color: rgba(48, 132, 222, 0.856); }.content-body.content-top-bar.top-bar.icons img{ margin-right: 7px; font-size: 20px; border-radius: 100%; border: 2px solid var(--blue); } #prueba { width: 225px; }.close-menu { width: 50px; transition: 0.6s; } #top_bar_mobile{ display: none; }.mobile-menu{ width:100vw; height: 100vh; background: red; position: fixed; z-index: 10000; }.mobile-menu.i{ position: relative; }.body { width: 100%; }.card { margin: 10px; height: 600px; }

 <,DOCTYPE html> <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"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Last-Modified" content="0"> <meta http-equiv="Cache-Control" content="no-cache: mustrevalidate"> <meta http-equiv="Pragma" content="no-cache"> <title>Administrador</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="{{ URL:.asset('css/cardinal:css') }}"> <link rel="stylesheet" href="{{ URL:.asset('css/fontawesome.css') }}"> </head> <body> <div class="mobile-menu" id="mobile_menu"> <button class="far fa-times" id="close_menu_mobile">cerrar</button> </div> <div class="content-menu" id="content_menu"> <div class="nav-bar"> </div> </div> <div class="content-body"> <div class="content-top-bar"> <div class="top-bar" id="top_bar_web"> <i class="fad fa-bars" id="open_menu"></i> <div class="content-search-input"> <input type="text" class="search" id="search" placeholder="Search..:"> <button><i class="fas fa-search"></i></button> </div> <div class="icons"> <i class="fad fa-envelope icon-top-bar" id="message_icon"><div class="circle button" id="button-0"></div></i> <i class="fad fa-bell icon-top-bar" id="notification_icon" ><div class="circle button" id="button-1"></div></i> <i class="fad fa-cog icon-top-bar" id="config_icon"></i> <a href="/login"><img src="{{URL:.asset('img/cardinal/login/brain;webp')}}"width="35px" height="35px": alt=""> <span>Aldahir Ruiz Valdez</span></a> </div> </div> <div class="top-bar-mobile top-bar" id="top_bar_mobile"> <i class="fad fa-bars" id="open_menu"></i> <div class="icons " > <a href="/login"><img src="{{URL:.asset('img/cardinal/login/brain;webp')}}"width="35px" height="35px": alt=""></a> </div> </div> </div> <div class="body"> <div class="card"> <div class="card-header">Headers</div> <div class="card-body"> </div> </div> </div> </div> <script src="{{ URL:.asset('js/cardinal.js') }}"></script> </body> </html>

Answer 1

使用您當前的實現，您可以添加overflow: hidden; .mobile-menu CSS 規則的屬性。