Question

有没有办法禁用react-bootstrap手风琴的自动折叠例如：如果用户想一次打开两个内容，则可以

                    <Accordion>
                        <Card>
                            <Card.Header>
                                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                                    Click me!
                                </Accordion.Toggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey="0">
                                <h1>Hello! I'm the body</h1>
                            </Accordion.Collapse>
                        </Card>
                        <Card>
                            <Card.Header>
                                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                                    Click me!
                                </Accordion.Toggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey="0">
                                <h1>Hello! I'm another body</h1>
                            </Accordion.Collapse>
                        </Card>
                    </Accordion>

Answer 1

在一个手风琴组件中只能折叠一项，并且对于每个Accordion.Toggle和Accordion，应该使用不同的eventKey折叠。

<Accordion>
    <Card>
        <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
                Click me!
            </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey="0">
            <h1>Hello! I'm the body</h1>
        </Accordion.Collapse>
    </Card>
    <Card>
        <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="1">
                Click me!
            </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey="1">
            <h1>Hello! I'm another body</h1>
        </Accordion.Collapse>
    </Card>
</Accordion>

如果您希望具有可以单独打开且互不影响的不同项目，则可以使用两个不同的手风琴组件，如下所示：

            <Accordion>
                <Card>
                    <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="0">
                            Click me!
                        </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                        <h1>Hello! I'm the body</h1>
                    </Accordion.Collapse>
                </Card>
            </Accordion>
            <Accordion>
                <Card>
                    <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="1">
                            Click me!
                        </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="1">
                        <h1>Hello! I'm another body</h1>
                    </Accordion.Collapse>
                </Card>
            </Accordion>

有没有办法在react-bootstrap的手风琴上禁用自动折叠

1 个答案: