未命名 jnYsFG，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
<div class="container">
 <div class="item1">item1</div>
 <div class="item2">item2</div>
 </div>
</body>

</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14

            
            .container {
 display: flex;
 width: 300px;
 height: 200px;
 background-color: lightblue;
 }
 .item1 {
 background-color: lightcoral;
 flex: 1 1 0;
 }
 .item2 {
 background-color: lightgreen;
 flex: 1 1 0;
 }

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8

            
            const accordionHeaders = document.querySelectorAll(".accordion-header");
accordionHeaders.forEach((header) => {
 header.addEventListener("click", () => {
   const item = header.parentElement;
   item.classList.toggle("open");
 });
});

编辑器加载中

预览

控制台