实现业务需求

传统基于操作DOM的方式

1.想操作谁就先获取谁

2.给某元素绑定某事件

3.做该做的事情

  • 在事件触发的时候修改元素的样式
  • 动态创建一些结构
  • 增加一些判断，判断在什么情况下，要做上面的这些事
  • 增加一些循环，重复做点事情
  • …

数据驱动

  • Vue/React

手风琴效果

点击显示与隐藏

1
2
3
4
5
6
7
8
9
10
11
let cart = document.querySelector('.box')
let detail = document.querySelector('.detail')

cart.onclick = function () {
    let show = detail.style.display
    if (show === 'none') {
        detail.style.display = 'block'
    } else {
        detail.style.display = 'none'
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="box" id="box">
        <span class="cart">购物车</span>
        <div class="detail" id="detail" style="display: none">购物车的相关信息</div>
    </div>
    <script src="./index.js"></script>
</body>

</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
* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.box {
    width: 300px;
    height: 100px;
    border: 1px solid rebeccapurple;
}

.box span {
    cursor: pointer;
}

.box span:hover {
    background-color: antiquewhite;
}

.detail {
    height: 100%;
    background-color: blueviolet;
}