点击时消失的下拉导航答案

【问题标题】：DropDown Nav that disappears onclick点击时消失的下拉导航
【发布时间】：2020-10-14 12:44:09
【问题描述】：

我试图让我的导航在点击时下拉，并且在点击时也会上升（消失）。主要针对手机版，因为我要在pc版上使用hover。我尝试使用焦点和主动，但它不起作用。我真的不想尝试javascript。我是 css 新手，但我会感谢你们 cmets。

.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
    </div>
  </div> 
</div>

【问题讨论】：

如果回答有帮助请标记

标签： html css navbar dropdown nav

【解决方案1】：

您可以通过将焦点放在按钮上来执行此操作。您必须添加媒体查询以调整何时以及什么应该起作用，但这是您为打开所做的行。 + 表示“我旁边的项目”。我已经注释掉了演示的悬停。

.dropbtn:focus + .dropdown-content {
  display: block;
}

.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/*.dropdown:hover .dropdown-content {
  display: block;
}*/

.dropbtn:focus + .dropdown-content {
  display: block;
}

<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
    </div>
  </div> 
</div>

【讨论】：