javascript - 当 CSS 中的下拉菜单可见时，如何删除父组件中的按钮？

Question

我创建了一个如下所示的下拉菜单，只要它可见，其下方的按钮仍然处于事件/可见状态。如何使下拉菜单位于最顶层？部分可见的省略号按钮是功能性的，这不是我想要的。

Dropdown.jsx

const Dropdown = props => {
  const [showOptions, setShowOptions] = useState(false);

  const toggleOptions = e => {
    e.preventDefault();
    setShowOptions(!showOptions);
  }

  const buttonLabel = (<i className='fa fa-ellipsis-v' />)

  return (
    <div className='employees-li-options'>
      <FormButton
        label={buttonLabel}
        id='employees-li-options-button'
        type='button'
        onClick={toggleOptions}
        />
      {
        showOptions ? (
          <div className='employees-li-options-visible'>
            <FormButton
              type='button'
              label='active'
              />
            <FormButton
              type='button'
              label='inactive'
              />
            <FormButton
              type='button'
              label='deactivated'
              />
            <FormButton
              type='button'
              label='invite pending'
              />
          </div>
        ) : (
          null
        )
      }
    </div>
  )
};

CSS

.employees-li-options-visible {
  position: absolute;
  background-color: $white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-evenly;
  border-radius: 10px;
  box-shadow: 0 0 5px 1px $light-gray1; 
  padding: 1em 1em 0.1em 1em;
}

Answer 1

您可以使用CSS。只需将 z-index 样式添加到父级或下拉列表本身即可。父元素在下拉列表后面应该仍然可见。 z-index .

// To the parent
#parent {
    z-index: -1;
}

// To the dropdown
.employees-li-options-visible {
    z-index: 1000;
}