css高度动画显示，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

README.md

index.html

            
                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

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

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

<body>
  <div class="total-container">
    <nav class="menu">
      <ul class="menu-list">
        <li class="menu-item">
          <span class="menu-text">主菜单1</span>
          <div class="sub-menu">
            <ul class="sub-list">
              <li class="sub-item">
                <span class="menu-text">子菜单a</span>
              </li>
            </ul>
          </div>
        </li>
        <li class="menu-item">
          <span class="menu-text">主菜单2</span>
          <div class="sub-menu">
            <ul class="sub-list">
              <li class="sub-item">
                <span class="menu-text">子菜单b</span>
              </li>
              <li class="sub-item">
                <span class="menu-text">子菜单c</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
    <hr>
    <details class="accordion">
      <summary>
        如何启用双重验证？
      </summary>
      <div class="content">
        <p>双重验证（2FA）可为您的账户增加一层安全保护。启用后，除密码外，您还需通过手机验证码、身份验证器应用或安全密钥完成登录。建议使用 Google Authenticator、Microsoft Authenticator 或 Authy 等支持 TOTP 协议的应用程序进行配置。</p>
      </div>
    </details>
  </div>
</body>

</html>

编辑器加载中

style.css

            
                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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

            
            body {
  background-color: #fefefe;
}

.total-container {
  width: 500px;
  margin: 30px auto;
  padding: 30px;
  border: 1px dotted transparent;
}

.menu {
  width: 200px;
  color: #333;
  font-size: 16px;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .menu-text {
    transition: background-color 0.25s, color 0.25s;
    cursor: pointer;
  }

  .menu-text:hover {
    color: #610b00;
  }

  .menu-item.-open>.menu-text::after {
    transform: rotate(180deg);
  }

  .menu-item>.menu-text {
    display: flex;
    padding: 5px 10px;
    background-color: #ff9c6e;

    &:hover {
      background-color: hsl(from #ff9c6e h s 60%);
    }

    &::after {
      display: block;
      content: "";
      width: 16px;
      height: 16px;
      margin-left: auto;
      align-self: center;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23871400' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E %3C/svg%3E") center no-repeat;
    }
  }

  .sub-item>.menu-text {
    display: block;
    padding: 5px 30px;
    background-color: #ffd8bf;

    &:hover {
      background-color: hsl(from #ffd8bf h s 80%);
    }
  }
}

.sub-list {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.menu-item.-open .sub-list {
  height: calc-size(auto, size);
}

.accordion .content {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 1s;
  overflow: hidden;
}

/* 展开时修改网格行高度 */
.accordion[open] .content {
  grid-template-rows: minmax(0, 1fr);
}

/* .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
  overflow: hidden;
}

.menu-item.-open .sub-menu {
  grid-template-rows: 1fr;
}

.sub-list {
  min-height: 0;
} */
/* .menu-item {
  display: grid;
  grid-template-rows: 31px minmax(0, 0fr);
  transition: grid-template-rows 0.3s;
  overflow: hidden;
}

.menu-item.-open {
  grid-template-rows: 31px minmax(0, 1fr);
} */
/* .sub-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.menu-item.-open .sub-list {
  max-height: 999em;
} */
/* .sub-menu {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.3s;
  overflow: hidden;
}

.menu-item.-open .sub-menu {
  grid-template-rows: minmax(0, 1fr);
} */

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8
9
10
11

            
            const menuEl = document.querySelector('.menu');

menuEl.addEventListener('click', function(event) {
  const targetEl = event.target;
  const parentEl = targetEl.parentNode;
  
  if (targetEl.className === 'menu-text' && parentEl.classList.contains('menu-item')) {
    console.log("here");
    parentEl.classList.toggle("-open");
  }
});

编辑器加载中

README.md

            
                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

            
            # HTML/JS/CSS 项目模板

笔COOL提供的基础HTML项目，样式、脚本分离到单独的文件

## 用途

- 想要简单练习 HTML
- 快速预览AI生成的 HTML 
- 展示自己的 HTML 作品

## 文件

- **index.html**： 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
- **sytle.css**： 样式文件
- **index.js**： 脚本文件

你可以自行添加更多的文件

## 内容
项目介绍
- 通过 `<link rel="stylesheet" href="./style.css">` 引入样式文件
- 通过 `<script src="./index.js"></script>` 引入脚本文件
- 页面显示标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 HTML 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力

## 模板使用

- 首页点击 **创建项目**，选择 **新建 HTML/JS/CSS 项目** 即可使用该模板

- 或访问 https://bi.cool/project 即可快速进入此模版

编辑器加载中

预览

控制台