1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 500px;
height: auto;
border: 1px solid red;
margin: 100px auto;
}
li {
list-style: none;
padding: 10px;
border-top: 1px solid red;
margin-top: -1px;
/* 消除边框重叠 */
}
.triangle {
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid #333;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: rotate(-90deg);
}
.title {
cursor: pointer;
}
.content {
/* padding: 10px; */
font-size: 10px;
height: 0;
overflow: hidden;
width: 100%;
}
.auto_and_rotate0 {
height: auto;
transform: rotate(0);
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li>
<div class="title">
<div class="triangle"></div>
<span>标题一</span>
</div>
<p class="content">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</li>
<li>
<div class="title">
<div class="triangle"></div>
<span>标题</span>
</div>
<p class="content">内容</p>
</li>
</ul>
</div>
</body>
</html>
<script>
var titles = document.getElementsByClassName("title")
var contents = document.getElementsByClassName("content")
var triangles = document.getElementsByClassName("triangle")
for (let i = 0; i < titles.length; i++) {
titles[i].onclick = function () {
contents[i].className = contents[i].className == 'content' ? "auto_and_rotate0 content" : "content"
triangles[i].className = triangles[i].className == 'triangle' ? "auto_and_rotate0 triangle" : "triangle"
}
}
</script> |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"原生js简单实现下拉列表效果"
最新评论