Javascript 单击标题时动态展开/折叠

我有一组需要在UI中显示的项目，如标题和下面的项目列表。
有一个父组件，我在其中将此数据传递到如下所示的文件。
基于此，将显示父子布局
现在我需要根据标题的单击展开/折叠

有一个类“open”和“close”可以附加到div。基于它，它将被折叠/展开。
关键是如何按项目进行操作

有人能帮忙吗

import React from "react";
import Child from "./Child";
import Parent from "./Parent";

export default class Helper extends React.Component{
  constructor(props: any) {
    super(props);
    this.state = {
      parent:{},
      children:{},
    };
  }

  componentDidMount() {
    this.setParentValue();
    this.setChildValue();
  }


  render() {
    const { parent, children } = this.state;
    const { name } = this.props;
    return (
      <>
        <div className="an-panel expand-panel expand-close">
          <div className="an-panel-header">
            <div className="title-holder">
              <span className="toggle-icon far fa-plus-square" />
              <span className="toggle-icon far fa-minus-square" />
              <h5>{name}</h5>
            </div>
            <div className="action-holder">
              <div className="status-holder">
                <Parent
                  parent = {parent}
                  onSelect={this.handleParentClick}
                />
              </div>
            </div>
          </div>
          {children.map(({ id, name },id) => (
            <div className="an-panel-body" key={id}>
              <ul className="applications-list-holder">
                <li>
                  <div className="name">{name}</div>
                  <div className="status">
                    <Child
                      children={children}
                      onSelect={this.setChildSwitchValue}
                    />
                  </div>
                </li>
              </ul>
            </div>
          ))}
        </div>
      </>
    );
  }
}

从“React”导入React；
从“/Child”导入子项；
从“/Parent”导入父项；
导出默认类帮助程序扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
父：{}，
儿童：{}，
};
}
componentDidMount（）{
此参数为.setParentValue（）；
这是.setChildValue（）；
}
render（）{
const{parent，children}=this.state；
const{name}=this.props；
返回(
{name}
{children.map（{id，name}，id）=>(


{name}


))}
);
}
}

好的，让我给你解释一下，这是你的代码

    import React from "react";
import Child from "./Child";
import Parent from "./Parent";

export default class Helper extends React.Component{
    constructor(props: any) {
        super(props);
        this.state = {
            parent:{},
            children:{},
            navBarStatus: false,
        };
    }

    componentDidMount() {
        this.setParentValue();
        this.setChildValue();
    }

   changeNavBar = (e, status)=>{
        this.setState({navBarStatus: !status});
    }


    render() {
        const { parent, children } = this.state;
        const { name } = this.props;
        return (
            <>
                <div className={`an-panel expand-panel ${this.state.navBarStatus ? "expand-open" : "expand-close"}`}>
              <div className="an-panel-header" onClick={(e)=>this.changeNavBar(e, this.state.navBarStatus)}>
                <div className="title-holder">
                  <span className="toggle-icon far fa-plus-square" />
                  <span className="toggle-icon far fa-minus-square" />
                  <h5>{name}</h5>
                </div>
                <div className="action-holder">
                  <div className="status-holder">
                    <Parent
                      parent = {parent}
                      onSelect={this.handleParentClick}
                    />
                  </div>
                </div>
              </div>
              {children.map(({ id, name },id) => (
                <div className="an-panel-body" key={id}>
                  <ul className="applications-list-holder">
                    <li>
                      <div className="name">{name}</div>
                      <div className="status">
                        <ChildSetting
                          children={children}
                          onSelect={this.setChildSwitchValue}
                        />
                      </div>
                    </li>
                  </ul>
                </div>
              ))}
            </div>
          </>
        );
      }
    }

从“React”导入React；
从“/Child”导入子项；
从“/Parent”导入父项；
导出默认类帮助程序扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
父：{}，
儿童：{}，
导航状态：false，
};
}
componentDidMount（）{
此参数为.setParentValue（）；
这是.setChildValue（）；
}
更改导航栏=（e，状态）=>{
this.setState（{navBarStatus:！status}）；
}
render（）{
const{parent，children}=this.state；
const{name}=this.props；
返回(
this.changeNavBar（e，this.state.navBarStatus）}>
{name}
{children.map（{id，name}，id）=>(


{name}


))}
);
}
}

---

你可以看到，我已经取得了一个新的财产状态。基于navBarStatus值，我正在更改CSS类，该类将扩展/关闭附加的div

您已经尝试了什么？什么是面板，您的自定义组件？@medtleukibululy是该面板的自定义类。如果我加上“关闭”或“打开”，它就会折叠或展开。但是你想让它成为项目智能。项目智能是什么意思？@medttleucabilly就像单个标题一样，会有+或-按钮指示展开或折叠。单击时，它应展开或折叠。默认情况下，由于此className=“面板展开面板展开关闭”，所有面板都将处于折叠状态。现在如果我让它展开，它会展开，但对于所有的项目。我想要像单个项目展开/折叠这样的东西。现在如果我让它展开打开，你在哪里做，显示代码