如何在button获得focus时将指定div的display属性设置为flex

方案1：纯CSS实现（仅适用于按钮和目标div为同父级的相邻/兄弟结构场景） #

如果DOM结构满足CSS选择器的匹配规则，无需引入JS即可实现需求：

相邻兄弟结构示例 #

HTML结构：

<button class="trigger-btn">聚焦触发按钮</button>
<div class="target-div">待显示的目标容器</div>

对应的CSS代码：

/* 目标容器默认隐藏 */
.target-div {
  display: none;
  /* 其余自定义样式按需补充 */
}
/* 按钮聚焦时选中后续紧邻的目标div，修改显示属性 */
.trigger-btn:focus + .target-div {
  display: flex;
}

如果按钮和目标div不是紧邻的兄弟节点，只需要把相邻选择器+替换为通用兄弟选择器~即可。

方案2：JS实现（通用场景，不受DOM结构限制） #

如果按钮和目标div的DOM结构不满足CSS选择器的匹配规则，通过监听聚焦事件实现，适配所有场景：
首先给按钮和对应div添加关联属性建立映射关系，示例HTML结构：

<button class="trigger-btn" data-target="box-1">按钮1</button>
<!-- 任意位置的目标div -->
<div class="target-div" id="box-1">按钮1对应的容器内容</div>

<button class="trigger-btn" data-target="box-2">按钮2</button>
<div class="target-div" id="box-2">按钮2对应的容器内容</div>

对应的JS代码：

const triggerBtns = document.querySelectorAll('.trigger-btn');
triggerBtns.forEach(btn => {
  // 监听聚焦事件，显示对应div
  btn.addEventListener('focus', () => {
    const targetEl = document.getElementById(btn.dataset.target);
    targetEl && (targetEl.style.display = 'flex');
  });
  // 若需要失焦时自动隐藏，可补充blur事件监听，不需要可删除
  btn.addEventListener('blur', () => {
    const targetEl = document.getElementById(btn.dataset.target);
    targetEl && (targetEl.style.display = 'none');
  });
});

框架场景简化实现 #

如果使用前端框架开发，可以直接通过框架的响应式状态实现，无需手动操作DOM：

Vue3示例 #

<template>
  <button @focus="showBox = true" @blur="showBox = false">触发按钮</button>
  <div v-if="showBox" style="display: flex">目标容器内容</div>
</template>
<script setup>
import { ref } from 'vue';
const showBox = ref(false);
</script>

React示例 #

import { useState } from 'react';

function Demo() {
  const [showBox, setShowBox] = useState(false);
  return (
    <>
      <button 
        onFocus={() => setShowBox(true)}
        onBlur={() => setShowBox(false)}
      >
        触发按钮
      </button>
      {showBox && <div style={{display: 'flex'}}>目标容器内容</div>}
    </>
  );
}

内容的提问来源于stack exchange，提问作者Rvssco