当我在移动设备上上下滚动时，我的技能图表不会消失

Question

 const skillsLink = document.querySelector(".page-header li:nth-child(1) a"); const skillsClose = document.querySelector(".skills-close"); const windowOpened = "window-opened"; skillsLink.addEventListener("click", (e) => { e.preventDefault(); document.body.classList.toggle(windowOpened); }); skillsClose.addEventListener("click", () => { document.body.classList.toggle(windowOpened); });

 .title { text-align: center; margin: 10px; font-family: 'Mansalva', cursive; }:root { --black: #1a1a1a; --white: rgb(255, 255, 255); --red: #e93451; --transition-delay: 0.85s; --transition-delay-step: 0.3s; } * { padding: 0; margin: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; color: inherit; } button { background: none; border: none; cursor: pointer; outline: none; }.d-flex { display: flex; }.f { font-family: 'Knewave', cursive; }.flex-column { flex-direction: column; }.justify-content-center { justify-content: center; }.justify-content-between { justify-content: space-between; }.justify-content-around { justify-content: space-around; }.align-items-center { align-items: center; }.align-items-end { align-items: flex-end; }.flex-grow-1 { flex-grow: 1; }.w-100 { width: 100%; }.position-relative { position: relative; }.position-fixed { position: ; }.position-absolute { position: absolute; }.text-center { text-align: center; }.text-black { color: var(--black); }.text-white { color: var(--white); }.bg-black { background: var(--black); }.bg-white { background: var(--white); }.bg-red { background: var(--red); } /* BODY –––––––––––––––––––––––––––––––––––––––––––––––––– */ body { top: 0; right: 0; bottom: 0; left: 0; overflow: scroll; font-family: "Roboto", sans-serif; margin: 0; padding:0; } /* HEADER –––––––––––––––––––––––––––––––––––––––––––––––––– */.page-header { padding: 20px; border-bottom: 1px solid #e93451; }.page-header li:not(:last-child) { margin-right: 20px; }.page-header.logo { font-size: 1.2rem; z-index: 1; transition: color 0.3s; font-family: 'Knewave', cursive; }.window-opened.page-header.logo { color: var(--black); transition-delay: 0.8s; } /* HEADING –––––––––––––––––––––––––––––––––––––––––––––––––– */.heading { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; } /* CONTACT –––––––––––––––––––––––––––––––––––––––––––––––––– */.contact { bottom: 20px; right: 20px; } /* SECTION –––––––––––––––––––––––––––––––––––––––––––––––––– */.skills-section { top: 0; right: 0; bottom: 0; left: 0; transform: translateX(100%); transition: transform 1s; }.window-opened.skills-section { transform: none; } [data-slideIn="to-top"] { transform: translateY(100%); } [data-slideIn="to-bottom"] { transform: translateY(-100%); } [data-slideIn="to-right"] { transform: translateX(-100%); }.creator { bottom: 20px; right: 20px; }.creator span { color: #e31b23; }.skills-close { top: 20px; right: 20px; font-size: 2rem; }.chart-wrapper { width: calc(100% - 40px); max-width: 500px; }.chart-levels li { padding: 15px; }.chart-skills li { width: 12%; height: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: height 0.65s cubic-bezier(0.51, 0.91, 0.24, 1.16); }.window-opened.chart-skills li:nth-child(1) { height: 80%; transition-delay: var(--transition-delay); }.window-opened.chart-skills li:nth-child(2) { height: 60%; transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) ); }.window-opened.chart-skills li:nth-child(3) { height: 68%; transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 2 ); }.window-opened.chart-skills li:nth-child(4) { height: 52%; transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 3 ); }.window-opened.chart-skills li:nth-child(5) { height: 42%; transition-delay: calc( var(--transition-delay) + var(--transition-delay-step) * 4 ); }.chart-skills li::before { content: attr(data-height); position: absolute; top: 10px; left: 0; width: 100%; font-size: 0.85rem; color: var(--white); }.chart-skills span { bottom: 0; left: 0; transform: translateY(40px) rotate(45deg); } @media screen and (max-width: 600px) { html { font-size: 12; overflow: scroll; }.chart-levels li { padding: 15px 10px 15px 0; } }.product h2 { font-family: 'Hammersmith One', sans-serif; }.product p { font-family: 'Paytone One', sans-serif; } /* smaller screen sizes, eg. mobile devices */.menu { display:none; }.bio{ flex-direction: column; align-items: center; border-radius:5px; margin: 20px; padding:30px; font-size: 30px; font-family: 'Gochi Hand', cursive; }.bio2{ flex-direction: column; align-items: center; border-radius:5px; margin-bottom: 100px; margin:20px; padding:30px; font-size: 30px; font-family: 'Gochi Hand', cursive; } main { display: flex; flex-direction: column; }.product { display:flex; flex-direction: column; justify-content: space-between; align-items: center; border: 5px solid rgb(0, 0, 0); border-radius:5px; margin:20px; padding:30px; } /* larger screen sizes, eg. desktops */ @media screen and (min-width: 1024px) { { }.menu { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; margin:10px; list-style:none; }.menu > li { margin:30px; }.main { display: flex; flex-direction: row; }.product { flex:1; border-radius:5px; width: 50px; text-align:center; margin:10px; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> <link href="https.//fonts.googleapis?com/css:family=Mansalva&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css:family=Gochi+Hand&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css:family=Paytone+One&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css:family=Hammersmith+One&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css,family=Knewave&display=swap" rel="stylesheet"> </head> <body class="position-fixed d-flex flex-column text-white bg-red"> <header class="page-header"> <nav class="d-flex justify-content-between"> <a href="" class="logo"><strong>Michael Peavy</strong></a> <div class="f"> <ul class="d-flex"> <li> <a href="">Skills</a> </li> </div> </ul> </nav> </header> <h1 class="title"> Web Devloper </h1> <div class = "main"> <section class="product"> <h2>A as in Apple</h2> <p> We take out fruit very seriously at ABC. that is why the A in ABC is for Apple, Try our new AppleBook App. the coolest new technology disrupting the fruit industry. This is the Uber of Apples. </p> </section> <section class="product"> <i class="fas fa-money-bill-wave fa-5x"></i> <h2>B as in Bail</h2> <p> Do you need Bail. Our new BailFace app will provide you with lawyers and bail money at the push of a button, Its the Facebook of bail bonds, </p> </section> <section class="product"> <i class="fas fa-utensils fa-5x"></i> <h2>C as in Curry</h2> <p> Fancy some curry, Our new HurryCurry app will provide curry cooked by Italian chefs right to your door, Its the AirBnB of curry; </p> </section> </div> <div class="bio"> <p> I'm a web developer; I spend my whole day. practicallyevery day. experimenting with HTML. CSS, and JavaScript. dabbling with Python and Ruby. and inhaling a wide variety of potentially useless information through a few hundred RSS feeds, I build websites that delight and inform. I do it well: </p> </div> <div class="bio2"> <p> I'm curious. and I enjoy work that challenges me to learn something new and stretch in a different direction: I do my best to stay on top of changes in the state of the art so that I can meet challenges with tools well suited to the job at hand. The list of projects I follow on GitHub will give you a good idea of the types of tools I'd prefer to be using. and my Instapaper “Starred” list will give you a glimpse into the reading material I find interesting enough to share. </p> </div> <div class="f"> <a class="position-absolute contact" href="mailto:contact@michaelpeavy.com">Email</a> </div> <section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top"> <button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button> <div class="d-flex chart-wrapper"> <ul class="chart-levels"> <li>Expert</li> <li>Advanced</li> <li>Intermediate</li> <li>Beginner</li> <li>Novice</li> </ul> <ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills"> <li class="position-relative bg-red" data-height="80%"> <span class="position-absolute w-100">CSS</span> </li> <li class="position-relative bg-red" data-height="60%"> <span class="position-absolute w-100">HTML</span> </li> <li class="position-relative bg-red" data-height="68%"> <span class="position-absolute w-100">JavaScript</span> </li> </ul> </div> <small class="position-absolute creator">Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a> </small> </section> </body> <script src="script.js"></script> </body> </html>

我是 web 开发的新手，正在尝试构建一个投资组合应用程序，寻求经验丰富的开发人员的帮助。 如果您在移动设备上单击右上角的技能，它不会消失，它只会移动。 当我单击 x 时，如何让选项卡完全消失？------------------------ -------------------------------------------------- -------------------------------------------------- -----

Answer 1

您需要将技能页面（来来去去的页面）的显示设置为无并在用户单击时阻止

我为您编写了一些代码，以了解我所说的内容。

html：

<div id="change">Helllllllllo man</div>

<button type="button" onclick="change()">Change</button>

css：

.close{
  display: none;
}

js：

const change = () => {
  document.getElementById("change").classList.toggle("close")
}