第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

單擊列表項(xiàng)時(shí),自定義展開/折疊菜單列表會折疊

單擊列表項(xiàng)時(shí),自定義展開/折疊菜單列表會折疊

森林海 2023-04-20 10:14:33
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;}
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

您的問題之一是您將事件偵聽器直接添加到 DOM 元素,這是您在使用 React 時(shí)不應(yīng)該做的事情,除非出于某種原因絕對必要。您應(yīng)該改用 React 的onClick屬性,就像您在下面對列表項(xiàng)所做的那樣。

現(xiàn)在,關(guān)于單擊內(nèi)部元素時(shí)列表折疊的問題,您可能需要查看事件冒泡?Event.stopPropagation引用的內(nèi)容

祝你好運(yùn)!


查看完整回答
反對 回復(fù) 2023-04-20
  • 1 回答
  • 0 關(guān)注
  • 182 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號