css - 如果用户在 div 外部单击，我们如何更改状态

Question

我有 3 个格。这将表现得像选择框。 第一个选择框将打开第一个列表项并关闭第二个和第三个列表项 第二个选择框将打开第二个列表项并关闭第一和第三个列表项 第三个选择框将打开第三个列表项并关闭第一和第二个列表项

我需要如果用户点击元素的侧面或选择框，那么第一个、第二个和第三个元素列表应该关闭。

我附上了`

screen shot

/image/VrTAA.png

提前致谢

onlocationClick = () => {
    let currentlocationblock = this.state.openLocation;
    this.setState({
        openLocation: !currentlocationblock,
        openage: false,
        opengender: false,
        clearAllUncheck: true,
    })
}
onageClick = () => {
    e.preventDefault();
    let currentageblock = this.state.openage;
    this.setState({
        openLocation: false,
        openage: !currentageblock,
        opengender: false,
        clearAllUncheck: true,
    })
}
ongenderClick = () => {
    let currentgenderblock = this.state.opengender;
    this.setState({
        opengender: !currentgenderblock,
        openage: false,
        openLocation: false,
        clearAllUncheck: true,

    })
}

Answer 1

您可以通过为相关的 div 指定 -1 的 tabIndex 来做到这一点，这样它们就可以以编程方式获得焦点，而无需成为选项卡选择的一部分。之后，您可以只使用 css 随意操作它们。您可以在 codesandbox 中看到这方面的示例.