前端js html css 基础巩固7

复制代码
<!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>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Muli', sans-serif;
            background-color: #f0f0f0;
        }

        h1 {
            margin: 50px 0 30px;
            text-align: center;
        }

        .faq-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .faq {
            background-color: transparent;
            border: 1px solid #9fa4a8;
            border-radius: 10px;
            margin: 20px 0;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: 0.3s ease;
        }

        .faq.active {
            background-color: #fff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .faq.active::before,
        .faq.active::after {
            content: '\f075';
            font-family: 'Font Awesome 5 Free';
            color: #2ecc71;
            font-size: 7rem;
            position: absolute;
            opacity: 0.2;
            top: 20px;
            left: 20px;
            z-index: 0;
        }

        .faq.active::before {
            color: #3498db;
            top: -10px;
            left: -30px;
            transform: rotateY(180deg);
        }

        .faq-title {
            margin: 0 35px 0 0;
        }

        .faq-text {
            display: none;
            margin: 30px 0 0;
        }

        .faq.active .faq-text {
            display: block;
        }

        .faq-toggle {
            background-color: transparent;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            padding: 0;
            position: absolute;
            top: 30px;
            right: 30px;
            height: 30px;
            width: 30px;
        }

        .faq-toggle:focus {
            outline: 0;
        }

        .faq-toggle .fa-times {
            display: none;
        }

        .faq.active .faq-toggle .fa-times {
            color: #fff;
            display: block;
        }

        .faq.active .faq-toggle .fa-chevron-down {
            display: none;
        }

        .faq.active .faq-toggle {
            background-color: #9fa4a8;
        }
    </style>
</head>

<body>
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
        <div class="faq active">
            <h3 class="faq-title">
                Why shouldn't we trust atoms?
            </h3>

            <p class="faq-text">
                They make up everything
            </p>

            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="faq">
            <h3 class="faq-title">
                What do you call someone with no body and no nose?
            </h3>
            <p class="faq-text">
                Nobody knows.
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="faq">
            <h3 class="faq-title">
                What's the object-oriented way to become wealthy?
            </h3>
            <p class="faq-text">
                Inheritance.
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="faq">
            <h3 class="faq-title">
                How many tickles does it take to tickle an octopus?
            </h3>
            <p class="faq-text">
                Ten-tickles!
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="faq">
            <h3 class="faq-title">
                What is: 1 + 1?
            </h3>
            <p class="faq-text">
                Depends on who are you asking.
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <script>
        const toggles = document.querySelectorAll('.faq-toggle')

        toggles.forEach(toggle => {
            toggle.addEventListener('click', () => {
                console.log(toggle.parentNode.classList, "toggle.parentNode.classList");
                toggle.parentNode.classList.toggle('active')
            })
        })
    </script>

</body>

</html>

直接上代码

这是 给 每一个问题添加了一个点击事件

显示一些类

相关推荐
Python_金钱豹几秒前
Text2SQL零代码实战!RAGFlow 实现自然语言转 SQL 的终极指南
前端·数据库·sql·安全·ui·langchain·机器人
兜小糖的小秃毛15 分钟前
两段文本比对,高亮出差异部分
linux·前端·javascript
佛系菜狗23 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息44 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
热水养鲨鱼1 小时前
Java实现HTML转PDF(deepSeekAi->html->pdf)
人工智能·pdf·html
遗憾随她而去.1 小时前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19992 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin2 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快2 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读