Question

我正在尝试在我的项目中添加可折叠项。该功能很简单。但是有一个CSS问题可折叠。当我单击标题时，可折叠面板会在所有标题之后打开。我想打开每个标题旁边的可折叠面板。我正在使用react-collapsible软件包。这是我的代码，

 return (
        assignTasklist && assignTasklist.map((assign) =>
        <div className="dashboard-tasklists-group_header">

            <div  id={assign.TaskType} className={ "dashboard-tasklists-group_header-left"} onClick={()=> {
                // e.preventDefault();
                // e.stopPropagation();
                this.onToggleAccordion(assign.TaskType)}}>
                {assign.Description}
            </div>
            <div className="dashboard-tasklists-group_header-right">


                <button className="dashboard-tasklists-group_header-caret-button" onClick={()=> {
                // e.preventDefault();
                // e.stopPropagation();
                this.onToggleAccordion(assign.TaskType)}}>
                    <CaretIcon />
                </button>
            </div>
        </div>
        )
    );
}


render() {
    const { assignDetails } = this.props;

    return <div className="dashboard-tasklists-group">

        <Collapsible trigger={this.groupWorkingHeader()} /* handleTriggerClick={() => {
        }}open={this.state.testflag} */ >

                      {assignDetails && assignDetails.length>0 && <div className="dashboard-index_announcements-wrapperWP" style={{cursor:'pointer'}}>
                          <div /* className="dashboard-index_announcements" */ style={{maxHeight: '240px',overflowY: "scroll"}}>                            
                                  {assignDetails.map(patient =>
                                      <div onClick={()=> {  browserHistory.push(`/patientsTask/${patient.PatientID}`); }} className="showingdet"><span style={{fontWeight:700}}>{patient.PatientID}</span>-{patient.Name}</div>                                   
                                )}

                          </div>
                          </div>}                     

                </Collapsible>
    </div>;
}

请帮助我解决

反应可协作面板css问题

0 个答案: