单击列表项时，自定义展开/折叠菜单列表会折叠

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引用的内容

祝你好运！