前端如何实现折叠面板效果

最新推荐文章于 2025-04-02 19:25:44 发布

weixin_43843897

最新推荐文章于 2025-04-02 19:25:44 发布

阅读量232

点赞数 3

文章标签：前端 javascript vue.js reactjs

本文链接：https://blog.youkuaiyun.com/weixin_43843897/article/details/145758626

版权

1 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Accordion</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        .accordion-item {
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .accordion-item:hover {
            background-color: #ccc;
        }

        .accordion-content {
            padding: 0 18px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-for="(item, index) in items" :key="index" class="accordion-item" @click="toggle(index)">
            {{ item.title }}
        </div>
        <div v-for="(item, index) in items" :key="index" class="accordion-content" :style="{ maxHeight: openIndex === index ? '200px' : '0px' }">
            <p>{{ item.content }}</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                items: [
                    { title: 'Section 1', content: 'Panel content 1...' },
                    { title: 'Section 2', content: 'Panel content 2...' },
                    { title: 'Section 3', content: 'Panel content 3...' }
                ],
                openIndex: null
            },
            methods: {
                toggle(index) {
                    this.openIndex = this.openIndex === index ? null : index;
                }
            }
        });
    </script>
</body>
</html>

2 react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Accordion</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        .accordion-item {
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .accordion-item:hover {
            background-color: #ccc;
        }

        .accordion-content {
            padding: 0 18px;
            maxHeight: 0;
            overflow: hidden;
            transition: maxHeight 0.4s ease-out;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        class Accordion extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    openIndex: null
                };
            }

            toggle = (index) => {
                this.setState({ openIndex: this.state.openIndex === index ? null : index });
            }

            render() {
                const { items } = this.props;
                return (
                    <div>
                        {items.map((item, index) => (
                            <div key={index} className="accordion-item" onClick={() => this.toggle(index)}>
                                {item.title}
                            </div>
                        ))}
                        {items.map((item, index) => (
                            <div key={index} className="accordion-content" style={{ maxHeight: this.state.openIndex === index ? '20