css我在和中制作了自定義展開/折疊列表javascript。這是我的代碼：componentDidMount() {var togglerCons = document.getElementsByClassName("caretCons");    var c;    for (c = 0; c < togglerCons.length; c++) {      togglerCons[c].addEventListener("click", function() {        this.parentElement          .querySelector(".nestedCons")          .classList.toggle("activeCons");        this.classList.toggle("caretCons-down");      });    }  <li className="caretCons">                <Link to={"/ConsignmentList"}>                  <span                    onClick={() =>                      this.props.updateTypeOfConsignmentList("general")                    }                  >                    {content[lang].consignmentlist}                  </span>                </Link>                <ul className="nestedCons">                  <li onClick={this.getConsPerDepot}>                    {content[lang].consPerDepot}                  </li>                  <li onClick={this.getExpectedCons}>                    {content[lang].expected}                  </li>                  <li onClick={this.getAssignedCons}>                    {content[lang].assigned}                  </li>                  <li onClick={this.getUnassignedCons}>                    {content[lang].unassigned}                  </li>                </ul>              </li>}這是結果： https: //i.stack.imgur.com/jlBzT.png這是單擊“寄售清單”時發生的情況：https ://i.stack.imgur.com/07oPN.png到這里為止一切都如預期。問題是，當用戶單擊寄售清單（預期的、分配的等）下的一個列表項時，列表會折疊并變得像第一張照片。我想要的是當用戶單擊列表項時列表保持展開狀態而不是折疊。它應該僅在用戶單擊插入符號（小三角形）時折疊。這是CSS.caretCons {  cursor: pointer;  -webkit-user-select: none; /* Safari 3.1+ */  -moz-user-select: none; /* Firefox 2+ */  -ms-user-select: none; /* IE 10+ */  user-select: none;}.caretCons::before {  content: "\25B6";  color: black;  display: inline-block;  margin-right: 6px;}.caretCons-down::before {  -ms-transform: rotate(90deg);   -webkit-transform: rotate(90deg);   transform: rotate(90deg);  }.nestedCons {  display: none;}.activeCons {  display: block;}