单击按钮显示隐藏子菜单经典案例

单击按钮显示隐藏子菜单经典案例攻略

1. 简介

在网页设计中，隐藏式菜单已经不再是新鲜事物，无论是电商网站还是普通网站，都有隐藏式菜单的应用。本文将详细讲解如何设计一个单击按钮显示隐藏子菜单的经典案例，并提供两条示例说明。

2. 设计思路

本案例的设计思路是：通过单击按钮，切换控制子菜单的显示和隐藏。具体实现思路如下：

2.1 在页面中添加一个按钮，用于控制子菜单的显示和隐藏。

2.2 在按钮被单击时，通过修改子菜单的样式来达到控制子菜单的显示或隐藏。

2.3 子菜单的初始状态是隐藏，当按钮被单击时切换显示和隐藏状态。

3. 代码实现

这里提供两个实现示例：

3.1 使用CSS实现

首先，我们在HTML中添加一个按钮和一个子菜单：

<button id="toggle-menu">菜单</button>
<ul id="menu" style="display:none">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

其中，按钮的id为"toggle-menu"，子菜单的id为"menu"，初始状态设置为不显示（style="display:none"）。

然后，我们使用CSS实现控制子菜单的显示和隐藏：

#toggle-menu {
  cursor: pointer;
}

#menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 200px;
  display: none;
  background-color: #f1f1f1;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

#toggle-menu:focus + #menu {
  display: block;
}

代码中，我们使用:focus伪类来实现按钮被聚焦时显示子菜单，因此可以通过单击按钮使其获得聚焦，达到控制子菜单显示和隐藏的目的。

3.2 使用JavaScript实现

如果不想使用:focus伪类，可以使用JavaScript来实现控制子菜单的显示和隐藏。

首先，在HTML中添加一个按钮和一个子菜单：

<button id="toggle-menu">菜单</button>
<ul id="menu" style="display:none">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

同样，按钮的id为"toggle-menu"，子菜单的id为"menu"，初始状态设置为不显示（style="display:none"）。

然后，在JavaScript中添加如下代码：

var toggleBtn = document.getElementById("toggle-menu");
var menu = document.getElementById("menu");

toggleBtn.onclick = function() {
  if (menu.style.display === "none") {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
}

代码中，我们使用onclick事件来为按钮添加点击事件。在点击事件中，判断子菜单当前是否显示，如果显示则隐藏，如果隐藏则显示。

4. 总结

通过以上两个示例，我们可以发现，无论是使用CSS还是JavaScript实现，单击按钮显示隐藏子菜单的实现思路都是类似的，只需要实现按钮点击事件并控制子菜单的显示和隐藏即可。在实际应用中，我们可以根据具体需求来选择适合的实现方式。