问题描述
我有一个手风琴,当您单击它时内容下降,一切正常,但是问题是,我有一个删除和一个添加按钮,我想单击它们而不触发手风琴。我该怎么做?我从reactstrap使用UncontrolCollapse,它有一个切换开关,它是元素的ID。
<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>
,它具有一个ID切换器,该切换器将切换显示所有嵌套项目的UncontrolCollapse。
我可以通过仅使<a></a>
具有切换ID来实现它,问题是,我想单击图标之间的空格并放置内容。
所以我只想让图标充当非触发者
我尝试通过将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>