我尝试React (v 16.5)使用以下条件创建折叠并展开侧面菜单-
React (v 16.5)
页面加载时,第一项(圆形)将处于展开视图中。一个项目可以一次扩展,例如,如果用户单击第二个项目(“规范”),则第一个项目将折叠。我还希望在收起/展开交易过程中使用一些CSS动画,例如平稳地向下/向上调整每个项目的主体部分并更改箭头图标。我的方法是sidebar- nav-menu-item动态地在每个项目()上添加/删除CSS类,例如-
sidebar- nav-menu-item
sidebar-nav-menu-item item-active
因此,当一个项目处于展开视图时,它应类似于上一类,而item- active当其处于折叠视图时应将其删除。默认情况下,div当项目处于折叠模式时,应通过CSS隐藏body (sidebar-nav-menu- item-body)。
item- active
div
import React, { Component } from 'react'; className SidebarNavs extends React.Component{ constructor(props) { super(props); } render() { return( <div className="sidebar-nav"> <div className="sidebar-nav-menu"> <div className="sidebar-nav-menu-item" data-id="circulars"> <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}> <div className="sidebar-nav-menu-item-head-title">Circulars</div> <div className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </div> <div className="sidebar-nav-menu-item-head-icon"> <i className="fa fa-caret-down" aria-hidden="true"></i> </div> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> <div className="sidebar-nav-menu-item" data-id="specifications"> <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}> <div className="sidebar-nav-menu-item-head-title">Specifications</div> <div className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </div> <div className="sidebar-nav-menu-item-head-icon"> <i className="fa fa-caret-down" aria-hidden="true"></i> </div> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> <div className="sidebar-nav-menu-item" data-id="wo"> <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}> <div className="sidebar-nav-menu-item-head-title">Work Orders</div> <div className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </div> <div className="sidebar-nav-menu-item-head-icon"> <i className="fa fa-caret-down" aria-hidden="true"></i> </div> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> </div> </div> ) } } export default SidebarNavs;
CSS:
.sidebar-nav-menu-item{ display:block; } .sidebar-nav-menu-item-body{ display:none; } .sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body{ display:block; }
您应该使用状态变量来显示可折叠项处于活动状态/非活动状态。
我对您的代码做了一些修改,以使其符合您的要求。
class App extends Component { constructor() { super(); this.state = { activeCollapse: 'circulars' }; } handleExpandCollaps = (name) => { if (this.state.activeCollapse === name) { this.setState({ activeCollapse: '' }) } else { this.setState({ activeCollapse: name }) } } moreInfoClick = (e) => { e.stopPropagation(); console.log("clicked"); } render() { return ( <div> <div className="sidebar-nav"> <div className="sidebar-nav-menu"> <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "circulars" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("circulars")} data-id="circulars" > <div className="sidebar-nav-menu-item-head"> <span className="sidebar-nav-menu-item-head-title">Circulars</span> <span className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </span> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "specifications" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("specifications")} data-id="specifications"> <div className="sidebar-nav-menu-item-head"> <span className="sidebar-nav-menu-item-head-title">Specifications</span> <span className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </span> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "wo" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("wo")} data-id="wo"> <div className="sidebar-nav-menu-item-head"> <span className="sidebar-nav-menu-item-head-title">Work Orders</span> <span className="sidebar-nav-menu-item-head-help"> <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button> </span> </div> <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div> </div> </div> </div> </div> ); } }
注意: 我曾经使用CSS过font-awesome图标。希望你已经添加font-awesome
CSS
font-awesome
演示版