如何水平折疊react-bootstrap手風琴面板？

Question

-我從陣營，引導頁面在這里面板組件工作https://react-bootstrap.github.io/components/panel/ -我想用自己的手風琴功能需要提醒的是面板主體的（面板。主體）水平打開（在面板右側打開。顯示標題）。

這是他們頁面中的示例之一：

 const PanelGroup = ReactBootstrap.PanelGroup; const Panel = ReactBootstrap.Panel; class App extends React.Component { constructor(props) { super(props); } render() { return ( <PanelGroup accordion id="accordion-uncontrolled-example"> <Panel style={{ display: 'flex' }} eventKey="1"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 1</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> <Panel style={{ display: 'flex' }} eventKey="2"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 2</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> <Panel style={{ display: 'flex' }} eventKey="3"> <Panel.Heading style={{ margin: '0 2% 0 0' }}> <Panel.Title toggle>Panel heading 3</Panel.Title> </Panel.Heading> <Panel.Body collapsible> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Panel.Body> </Panel> </PanelGroup> ) } } ReactDOM.render( < App / > , document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id='root'> Come On Work! </div> 

我添加了display: flex來包裹面板，盡管我在這里沒有得到想要的布局。 而不是延伸的在線，與具有相同的垂直齊平作為它自己的標題中的身體，我想它如果面板總是垂直齊平面板標題1，無論哪個面板是那一個被點擊打開。

另外，我希望面板標題在打開面板時保持相同的寬度，而不是縮小到非常小的寬度。

顯然，我不確定React-Bootstrap面板組件是否適合此工具，或者我是否應該創建自己的自定義水平手風琴工具（雖然不太確定該怎么做）。 這也是我要問的一部分！

與往常一樣感謝您的幫助。

Answer 1

很好地創建了這個工作片段，其中面板的工作方式類似於react-bootstrap示例。

但是不確定我是否能理解您在視覺上的確切需求？

您想要在切換幻燈片時獲得滑倒效果而不是滑倒效果嗎？

到底如何 您將面板標題作為一個塊，以便將內容放在哪里？

 const PanelGroup = ReactBootstrap.PanelGroup; const Panel = ReactBootstrap.Panel; class PanelHorizontal extends React.Component { constructor(props) { super(props); this.state = { visible: false } } render() { const classesNames = ['panelHorizontal']; if (this.state.visible){ classesNames.push('slideIn'); } else { classesNames.push('slideOut'); } return ( <div> <h1 className="title" onClick={()=>this.setState({visible: !this.state.visible})} >click to toggle</h1> <div className={classesNames.join(' ')}> content here </div> </div> ); }; } class App extends React.Component { constructor(props) { super(props); } render() { return ( <PanelHorizontal /> ) } } ReactDOM.render( < App / > , document.getElementById('root') ); 

 .panelHorizontal { width: 220px; transform: translateX(-220px); transition: transform 400ms ease-in; } .panelHorizontal.slideIn { transform: translateX(0); } .panelHorizontal.slideOut { transform: translateX(-220px); } .title { cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id='root'> Come On Work! </div>