Блог

У меня есть аккордеон, при нажатии на него содержимое падает, все работает хорошо, но проблема в том, что у меня есть кнопки удаления и добавления, я хочу нажать на них, а не запускать аккордеон. Как я могу это сделать? Я использую UncontrolledCollapse из reactstrap, и у него есть переключатель, который является идентификатором элемента.

 <ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div> </div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>
  

Вот изображение

Весь этот сероватый фон — мой <li></li> , у которого есть переключатель идентификаторов, который переключит UncontrolledCollapse, который покажет все вложенные элементы.

Я могу добиться этого, указав только идентификатор <a></a> переключения, проблема в том, что я хочу щелкнуть по пробелам между значками и удалить содержимое. Итак, я хочу, чтобы значки действовали только как не переключатели, я пытался сделать это, применив z-index:100 к icons div , но это не работает.

Это было бы хорошим случаем для использования контролируемого коллапса. Таким образом, вы можете контролировать, когда переключать аккордеон. В моем примере ниже обратите внимание на мое использование stopPropagation

 const [isOpen, setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

<ul>
  <li id={`toggle-catalog-item-${item.id}`} onClick={toggle}>
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div onClick={e => e.stopPropagation()}> </div>
      <div onClick={e => e.stopPropagation()}><TrashIcon /></div>
    </div>
  </li>
  <Collapse
    isOpen={isOpen}
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    Menu Item Children
  </Collapse>
</ul>
  

Получил мой ответ! просто переместите переключатель из li тега в div и передайте position:absolute значкам

Я изменил его с этого на

 <ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div> </div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>
  

к этому

 <ul>
  <li style={{position:'relative''}}
  >
//Add div
<div id={`toggle-catalog-item-${item.id}`}>
    <a>
      Some Accordion
    </a>
</div>
//Add position:absolute
    <div className="icons" style={{position:'absolute', bottom:0, left:0}}>
      <div> </div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>