javascript - 我在 html 中创建了一个展开按钮,它更改图标并显示内容(并反转它)但媒体查询第二次(不是第一次)
问题描述
$('#click1').click(function () {
var media = window.matchMedia("(max-width: 900px)")
var media2 = window.matchMedia("(min-width: 901px)")
if($(this).text() == 'unfold_more')
$(this).text('unfold_less');
else
$(this).text( 'unfold_more');
var x = document.getElementById("myDIV1");
console.log("before:", x.style.display)
if (x.style.display === "none" && media.matches) {
x.style.display = "grid";
} else if (x.style.display === "grid" && media.matches) {
x.style.display = "none";
} else if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
console.log("after:", x.style.display)
});
@import url('https://fonts.googleapis.com/css?family=Tourney&effect=emboss');
body {
background-color: rgb(0, 0, 0);
color: whitesmoke;
}
.title {
padding-left: 5.5%;
font-family: 'Tourney', sans-serif;
font-size: 30px;
font-weight: bold;
outline: none;
text-transform: uppercase;
color: white;
display: inline;
}
.category {
padding-left: 10%;
padding-right: 10%;
font-family: 'Titillium Web', sans-serif;
font-weight: bold;
margin-top: 5%;
font-size: 20px;
display: inline-table;
}
.line {
height: 3px;
border: 0;
background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
background-size: 400%;
animation: animate 5s linear infinite;
}
@keyframes animate {
to {
background-position: 400%;
}
.line2 {
height: 3px;
border: 0;
background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 19%, rgba(0, 212, 255, 1) 100%);
background-size: 400%;
animation: animate 10s linear infinite;
align-self: left;
margin-left: 10%;
margin-top: -15px;
width: 80%;
}
.hot {
filter: invert();
}
.hyp {
text-decoration: none;
color: whitesmoke;
}
}
h2 {
color: #3696dc;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
p {
font-size: 16px;
line-height: 24px
}
.container {
width: 82%;
margin: 0 auto;
list-style: none;
background-color: transparent;
display: flex;
justify-content: center;
}
.columns {
margin: 25px 15px 25px;
border-radius: 0px;
flex-basis: 33%;
background-color: black;
display: flex;
}
.card {
padding: 5px 5px;
border: 1px solid #00d4ff;
background-color: transparent;
text-align: center;
text-decoration: none;
transition: all .3s ease-in-out;
}
.card2 {
padding: 5px 5px;
border: 1px solid #00d4ff;
background-color: transparent;
text-align: center;
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
transition: all .3s ease-in-out;
}
.card:hover {
border: 3px solid #00d4ff;
cursor: crosshair;
transform: scale(1.1);
}
.card2:hover {
border: 3px solid #00d4ff;
cursor: crosshair;
}
img {
max-width: 100%
}
.pointer {
cursor: pointer;
}
.contain {
display: none;
background-color: inherit;
padding: 0;
font-family: 'Titillium Web', sans-serif;
transition: all .3s ease-in-out;
color: whitesmoke;
}
.card:hover .contain {
display: block;
transition: all .3s ease-in-out;
}
.card2:hover .contain {
display: block;
transition: all .3s ease-in-out;
}
.para {
margin-left: 10%;
margin-right: 10%;
font-family: 'Titillium Web', sans-serif;
}
#click1 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 80px;
cursor: pointer;
user-select: none;
}
#click2 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#click3 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#click4 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#myDIV1 {
display: none;
}
#myDIV2 {
display: none;
}
#myDIV3 {
display: none;
}
#myDIV4 {
display: none;
}
#page {
overflow: hidden;
}
@media screen and (max-width: 900px) {
.title {
font-size: 20px;
}
.container {
display: flex;
}
.card {
border: 1px solid #00d4ff;
}
.card2 {
border: 1px solid #00d4ff;
}
.card:hover {
border: 2px solid #00d4ff;
}
.card2:hover {
border: 2px solid #00d4ff;
}
.insta {
padding-right: 1%;
width: 13px;
height: 13px;
}
.category {
font-size: 16px;
}
.hot {
width: 16px;
height: 16px;
}
.contain {
font-size: 12px;
grid-template-columns: 50% 50%;
}
#click1 {
margin-top: 20px;
}
#click2 {
margin-top: 20px;
}
#click3 {
margin-top: 20px;
}
#click4 {
margin-top: 20px;
}
#myDIV1 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV2 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV3 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV4 {
display: none;
grid-template-columns: 50% 50%;
}
}
@media screen and (max-width: 680px) {
.qr {
width: 200px;
height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PixelByte</title>
<link href="style.css" rel="stylesheet">
<link rel="icon" href="Cube_1.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/iconfont/material-icons.min.css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous">
</script>
<script src="script.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/lightslider.js">
</script>
</head>
<body id="page">
<div class="content">
<header>
<div class="title">
<a href="index.html" class="hyp">
<h1 class="title"><b>PIXELBYTE</b></h1>
</a>
</div>
</header>
<hr class="line" width="80%" />
<! –– HOT AND TRENDING ––>
<p class="category"><img src="fire.png" alt="hot" width="27px" height="27px" class="hot" id="hot"> Hot and Trending </p><span class="material-icons" id="click1">unfold_more</span>
<hr class="line2" />
<div class="container">
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="MicroSHIBA/Micro Shiba-1.png.png" alt="MicroSHIBA" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="DOGELON/Dogelon Mars-1.png.png" alt="DOGELON Mars" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Baby EverDoge/Baby Everdoge-1.png (6).png" alt="Baby Everdoge" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Ghoul-1.png.png" alt="Ghoul" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
</div>
<div class="container" id="myDIV1">
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="MicroSHIBA/Micro Shiba-1.png.png" alt="MicroSHIBA" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="DOGELON/Dogelon Mars-1.png.png" alt="DOGELON Mars" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Baby EverDoge/Baby Everdoge-1.png (6).png" alt="Baby Everdoge" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Ghoul-1.png.png" alt="Ghoul" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
</div>
</body>
</html>
我想要它做的是在大屏幕上显示 flex 样式的 div,在较小的屏幕上显示网格样式的 div。它可以工作,但第二次切换按钮。我第一次单击按钮时,它显示 flex 类型的 div。
x.style.display
在 CSS 中是display: none
var media = window.matchMedia("(max-width: 900px)")
$('#click1').click(function() {
if ($(this).text() == 'unfold_more')
$(this).text('unfold_less');
else
$(this).text('unfold_more');
var x = document.getElementById("myDIV1");
if (x.style.display === "flex") {
x.style.display = "none";
} else if (x.style.display === "flex") {
x.style.display = "none";
} else if (x.style.display === "grid" && media.matches) {
x.style.display = "none";
} else if (x.style.display === "none" && media.matches) {
x.style.display = "grid";
} else {
x.style.display = "flex";
}
解决方案
推荐阅读
- c# - ASP Net Core - 通用页面模型
- perforce - Perforce 无法解析移动的文件
- java - com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;CLjava/lang/Object;)V
- linux - 即使 CMake 正确定位了相关的 .so 文件,链接器也会出错
- python - 如何循环整个 LED 序列?
- linux - 使用 std::thread 时,类中的成员变量会被破坏
- javascript - Javascript 不更新输入
- java - 展开树中的自动调整旋转策略
- c# - IDX10501:签名验证失败。Azure SSO WS 联合
- c# - C#奇怪的模速度行为