Skip to content

Instantly share code, notes, and snippets.

@UrbanSide

UrbanSide/gist:8a935d7b5b786eba750dfdd085081bc8

Created February 19, 2024 19:59
Show Gist options
  • Save UrbanSide/8a935d7b5b786eba750dfdd085081bc8 to your computer and use it in GitHub Desktop.
Save UrbanSide/8a935d7b5b786eba750dfdd085081bc8 to your computer and use it in GitHub Desktop.
Download ZIP
Test
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notice</title>
<style>
body{
margin:0%;
padding:0%;
background-color: #f1f0de;
font-family: sans-serif;
}
ul{
margin:0%;
padding:0%;
list-style: none;
}
ul li{
border: 2px solid #877E74;
margin: 2px 0px;
}
ul li .item{
position: relative;
padding: 0px 5px;
background-color:#62554D;
height: 40px;
line-height: 40px;
font-weight: bold;
color: #ccc;
}
ul li .item:hover{
background-color: #762826;
}
ul li .item_wrap{
display: none;
padding: 20px;
color: #5C3A36;
font-size: 20px;
}
.item_date{
position: absolute;
right: 1%;
font-size: 16px;
}
.item-icon{
position: absolute;
top: 50%;
transform:translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #ccc;
box-shadow: 0px 0px 5px #888888 ;
box-sizing: border-box;
}
.item-icon-none{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 0%;
height: 0%;
border-top: 8px solid transparent;
border-left: 16px solid rgb(54, 218, 204);
border-bottom: 8px solid transparent;
border-right: 0px solid transparent;
}
.item-icon-block{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 0%;
height: 0%;
border-top: 16px solid rgb(54, 218, 204);
border-left: 8px solid transparent;
border-bottom: 0px solid transparent;
border-right: 8px solid transparent;
}
.item-text{
margin-left: 40px;
font-size: 20px;
}
.txtColor{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item" style="background:#762826">
<span class="item-icon"><span id="item-icon" class="item-icon-block"></span></span>
<span class="item-text">Myth of Empires V1.0 Апдейт все нахуй нам сломал</span>
<span class="item_date">February 18th, 2024</span>
</div>
<div class="item_wrap" style="display:block;font-size: 16px;">
<strong><p><span style="font-size: 20px;font-weight:bold;">Дорогие пираты, </span></p> </strong><br />
<p>Я Адам Вейсхаупт посылаю разрабов нахуй и даю вам этот фикс!</p>
<p>Играйте на здоровье!</p>
</div>
</li>
</ul>
<script>
let items=document.querySelectorAll('.item'),
itemWraps=document.querySelectorAll('.item_wrap'),
itemIcons=document.querySelectorAll('#item-icon');
items.forEach((ele,index)=>{
//创建一个属性来记录当前面板是否展开 true 展开 false折叠
if(index==0){
ele.dispBol='true';
}else{
ele.dispBol='false';
}　
ele.onclick=((e)=>{
let thisDispBol=ele.dispBol; //先保存thisDisBol。接下来要重置
itemsInit();
thisDispBol=='false' ? ele.dispBol='true' : ele.dispBol='false';
repaint();
});
})
function repaint(){
items.forEach((ele,index)=>{
if(ele.dispBol=='true'){
itemWraps[index].style.display='block'
ele.style.background='#762826'
itemIcons[index].className="item-icon-block"
}else{
itemWraps[index].style.display='none';
ele.style.background='#62554D';
itemIcons[index].className="item-icon-none"
}
})
}
function itemsInit(){
items.forEach((ele,index)=>{
ele.dispBol='false';
})
}
function href_jump(url){
ue.obj.outerurl(url)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment