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>}這是結(jié)果: https: //i.stack.imgur.com/jlBzT.png這是單擊“寄售清單”時(shí)發(fā)生的情況:https ://i.stack.imgur.com/07oPN.png到這里為止一切都如預(yù)期。問題是,當(dāng)用戶單擊寄售清單(預(yù)期的、分配的等)下的一個(gè)列表項(xiàng)時(shí),列表會折疊并變得像第一張照片。我想要的是當(dāng)用戶單擊列表項(xiàng)時(shí)列表保持展開狀態(tài)而不是折疊。它應(yīng)該僅在用戶單擊插入符號(小三角形)時(shí)折疊。這是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;}
單擊列表項(xiàng)時(shí),自定義展開/折疊菜單列表會折疊
森林海
2023-04-20 10:14:33