如何显示隐藏/显示菜单(onblur / onfocus)

显示隐藏菜单可以通过使用onblur和onfocus事件来实现。

onblur事件在元素失去焦点时触发，而onfocus事件在元素获得焦点时触发。通过这两个事件，我们可以实现菜单的显示和隐藏。

具体实现步骤如下：

1. HTML结构：在HTML中，创建一个菜单容器和一个触发菜单显示隐藏的元素，例如一个按钮或输入框。

<div id="menu-container">
  <ul id="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

<input type="text" id="menu-trigger" placeholder="点击显示菜单">

1. CSS样式：使用CSS样式来定义菜单的外观和隐藏状态。

#menu-container {
  display: none; /* 初始状态隐藏菜单 */
  position: absolute;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}

#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#menu li {
  padding: 5px;
}

#menu-trigger {
  width: 200px;
}

1. JavaScript代码：使用JavaScript来实现菜单的显示和隐藏。

var menuContainer = document.getElementById("menu-container");
var menuTrigger = document.getElementById("menu-trigger");

menuTrigger.onfocus = function() {
  menuContainer.style.display = "block"; // 显示菜单
}

menuTrigger.onblur = function() {
  menuContainer.style.display = "none"; // 隐藏菜单
}

以上代码中，通过获取菜单容器和触发菜单显示隐藏的元素，并分别绑定onfocus和onblur事件。当触发元素获得焦点时，菜单容器的display属性设置为"block"，从而显示菜单；当触发元素失去焦点时，菜单容器的display属性设置为"none"，从而隐藏菜单。

这样，当用户点击或输入框获取焦点时，菜单将显示出来；当用户点击其他区域或输入框失去焦点时，菜单将隐藏起来。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云主页：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr