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

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引用的内容祝你好运！