JS 实现点击购物车显示详情，再点击购物车，详情收回

最新推荐文章于 2023-04-14 21:57:05 发布

AsiaFT.

最新推荐文章于 2023-04-14 21:57:05 发布

阅读量339

点赞数

文章标签： JavaScript DOM操作事件绑定购物车显示/隐藏

本文链接：https://blog.csdn.net/m0_46181452/article/details/126152190

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

需求：
使用JS实现，当鼠标单击购物车时，购物车显示详情；再次点击购物车时，详情收回。
解析：

传统基于操作DOM的方式实现业务需求：
1）想操作谁就先获取谁；
2）给某元素绑定某事件；
3）在事件触发时修改相关元素的样式等

代码实现：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .shoppingcart {
            box-sizing: border-box;
            border: 1px solid lightcoral;
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 100px;
            margin: 20px auto;
            position: relative;
            cursor: pointer;
        }
        
        .detail {
            /* display 改到html里定义，html的行内优先级最高 */
            /* display: none; */
            position: absolute;
            right: -1px;
            top: 28px;
            z-index: -1;
            box-sizing: border-box;
            border: 1px solid lightcoral;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="shoppingcart" id="shoppingcart">
        <span>购物车</span>
        <!-- 将display改为行内定义 -->
        <div class="detail" id="detail" style="display:none">
            <span>购物车详情</span>
        </div>
    </div>
    <script>
        // 1. 想要操作谁，就先获取谁
        let shoppingcart = document.getElementById("shoppingcart");
        let detail = document.getElementById("detail");
        // 2. 为被操作的对象绑定事件(只有事件名是非驼峰命名)
        shoppingcart.onclick = function() {
            // 3. 更改受影响对象的样式等（样式更改的是行内样式，所以要更改的样式必须要在html里style定义）
            // 1）点击前先判断detail的display是否是none，若为none，则display显示block.判断xx.style.样式
            let state = detail.style.display;
            if (state === 'none') {
                detail.style.display = 'block';
            } else {
                detail.style.display = 'none';
            }
        }
    </script>
</body>

</html>