Question

我有一个使用鼠标：悬停打开的下拉菜单。现在，我需要一个单击菜单中某些链接时关闭菜单的功能。我认为需要JS吗？

ris = ris.replace("[ID]", p.getId())
        .replace("[CODE]", p.getCode())
        .replace("[MODEL]", p.getModel());

if (p instanceof Pc) {
    ris = ris.replace("[CPU]", ((Pc) p).getCPU())
            .replace("[RAM]", ((Pc) p).getRam() + "")
            .replace("[MMA]", ((Pc) p).getMma() + "")
            .replace("[RAMTYPE]", ((Pc) p).getRamType())
            .replace("[MMATYPE]", ((Pc) p).getMmaType());
} else if (p instanceof Laptop) {
    ris = ris.replace("[BATTERYLIFE]", ((Laptop) p).getOrebatteria() + "")
            .replace("[INCHES]", ((Laptop) p).getPollici() + "");
} else if (p instanceof Smartphone) {
    ris = ris.replace("[NETWORK]", ((Smartphone) p).getNetwork())
            .replace("[MEGAPIXEL]", ((Smartphone) p).getMegapixel() + "")
            .replace("[JACK]", ((Smartphone) p).getJack());
}

.dropdow {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdow-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdow-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdow-content1 a:hover {
  background-color: #d86a1e
}

.dropdow:hover .dropdow-content1 {
  display: block;
  width: 100%;
}

我有一个使用鼠标：悬停打开的下拉菜单。现在，我需要一个单击菜单中某些链接时关闭菜单的功能。我认为需要JS吗？

Answer 1

是的，但是您可能需要通过添加<label>和一个复选框来更改某些布局：

.dropdow {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdow-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdow-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdow-content1 a:hover {
  background-color: #d86a1e
}

#dd {
  display: none;
}

#dd:checked+.dropdow-content1 {
  display: block;
  width: 100%;
}

<div class="dropdow">
  <div class="gap">
    <h3>Dropdownmenu</h3>
    <label class="dropbt1" for="dd"><h3>please choose</h3></label>
    <input type="checkbox" id="dd" />
    <div class="dropdow-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

Answer 2

一般而言，CSS无法捕获点击以“执行操作”。 Kumar的解决方案劫持了确实接受状态的隐藏HTML元素。不幸的是，您无法使用CSS更改复选框状态“已选中/未选中”，因此您将无法通过鼠标悬停来触发菜单。

如果要同时使鼠标悬停触发器（onMouseEnter和关闭事件（onClick）退出，则需要使用一些JavaScript。

也就是说，我强烈建议您重新考虑多种交互类型的使用。悬停/单击组合对于可用性不利，因为它要求人们理解并能够使用两种交互。例如，悬停不会在触摸设备上触发。并没有什么可以帮助用户理解“单击退出”与“悬停打开”。

如果您希望此功能适用于大多数用户，尤其是那些在触摸设备上的用户，则我只会坚持单击。

单击链接时，使用鼠标悬停打开下拉菜单并关闭菜单

2 个答案: