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>我是网络开发的新手，正在尝试构建一个组合应用程序，正在寻求经验丰富的开发人员的帮助。如果你在移动设备上点击右上角的技能，它不会消失它只会移动。单击 x 时如何使选项卡完全消失？------------------------------------ ---------------------------------------------- ---------------------------------------------- -----
最佳答案
你需要将你的技能页面(来来去去的页面)的显示设置为无，用户点击时屏蔽
我写了一点 thing让你明白我在说什么。
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")
}
关于javascript - 当我在移动设备上上下滚动时，我的技能图表不会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58142660/