單擊列表項時自定義展開/折疊菜單列表折疊

Question

我在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;
}

任何幫助將不勝感激。

Answer 1

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

現在，關於當您單擊內部元素時列表折疊，您可能需要查看事件冒泡以及此處引用的Event.stopPropagation

祝你好運！