Блог

Я создал пользовательский список расширения / свертывания в 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;
}
  

Любая помощь будет принята с благодарностью.

Одна из ваших проблем заключается в том, что вы добавляете прослушиватели событий непосредственно к элементам DOM, чего не следует делать при использовании React, если это не является абсолютно необходимым по какой-либо причине. Вместо этого вы должны использовать атрибут React onClick , как вы делаете ниже для элементов списка.

Теперь о списках, сворачивающихся при нажатии на внутренний элемент, вы можете захотеть посмотреть на всплывающее окно событий, а также Event.stopPropagation на которое ссылается здесь

Удачи!