javascript - 如何在移动设备上关闭基于悬停的 CSS 下拉菜单

Question

我正在尝试制作一个可在台式机、平板电脑和移动设备上动态运行的网页。我基于悬停选择器制作了一个仅 CSS 的下拉菜单(我想这就是它的名字，我仍然是一个新手)。它在桌面上运行良好，在移动设备上显示良好，我的问题是下拉菜单在不与移动设备交互时不会隐藏在移动设备上。我知道悬停不会将意志转化为移动设备，我希望通过点击下拉菜单，它会再次隐藏自己。

我试图用一个按钮和一点 javascript 重新创建下拉菜单，但是尝试用 css 定位元素变得一团糟。看起来 css only 方法是最不复杂的样式。不过，我对涉及 javascript 的想法持开放态度。

PS，请原谅乱七八糟的css，我还没整理呢。这是我仍在学习使用的东西。

 <nav class="nav-main">
         <ul>
           <a href="index.html"><li>Home</li></a>
           <a href="index.html#main"><li>About</li></a>
           <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Services</a>
              <div id="menu-box" class="dropdown-content">
                <a href="index.html#main">Overview</a>
                <a href="index.html#main">General Practice</a>
                <a href="index.html#main">Sports Physicals</a>
                <a href="index.html#main">Weight Loss</a>
              </div>
           </li>
           <a href="index.html#main"><li>Doctor's Daily Dose</li></a>
           <a href="index.html#main"><li>Contact</li></a>
         </ul>
       </nav>

}
nav ul li:hover{
  background-color: #D7868C;
  border-radius: 0.3em;
}

@media only screen and (max-width: 874px){
  nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  nav ul li{
    text-align: center;
    flex-direction: column;
  }
  header {
    flex-direction: column;
    width: 100%
  }
  nav ul a{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  nav{
    flex-direction: column;
  }
  #logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.2em;
}
}
footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid #343434;
  padding-top: 1em;
  margin-left: 0.1em;
  margin-right: 0.1em;
}
@media only screen and (max-width: 439px) {
  .footSec{
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #D7868C;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #CEDDE6;
  color: black;
}

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

如果您点击服务列表项，下拉菜单将显示在移动设备上。即使在点击它之后它也不会消失，只有当你打开一个不同的链接或刷新页面时。我的希望是，轻敲它会像从悬停点移除一匹骏马一样。好像不是这样的。

Answer 1

这是一种使用复选框在移动设备上提供点击 View 选项的技术。

注意:为了让片段显示点击有效，我必须将 media 查询设置为较大的分辨率 (1250)，显然你会把它放在实时代码。

一些注意事项。

我们现在有一个隐藏的复选框、一个标签和带有 for 标记的 span 以激活该复选框。

使用media查询，全屏隐藏label。

nav {
  display: inline-block;
  background-color: blue;
  min-width: 50px;
  min-height: 25px;
}

nav .navCheck {
  display: none;
}

label[for="navCheck"] {
  display: none;
}

ul {
  display: none;
  color: #fff;
}

ul a,
ul div a {
  text-decoration: none;
  color: white;
}

nav:hover ul {
  display: block;
}

@media screen and (max-width: 1250px) {
  label[for="navCheck"] {
    display: inline-block;
    width: 60px;
    height: 10px;
  }  
  
  label[for="navCheck"] span {
    margin:2px;
    display: block;
    width: 50px;
    height: 2px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 7px;
  }
  input[class="navCheck"]:checked + ul {
    display: block;
  }
}

<nav class="nav-main">
  <label for="navCheck">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <input id="navCheck" type="checkbox" class="navCheck" />
  <ul>
    <a href="index.html">
      <li>Home</li>
    </a>
    <a href="index.html#main">
      <li>About</li>
    </a>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Services</a>
      <div id="menu-box" class="dropdown-content">
        <a href="index.html#main">Overview</a>
        <a href="index.html#main">General Practice</a>
        <a href="index.html#main">Sports Physicals</a>
        <a href="index.html#main">Weight Loss</a>
      </div>
    </li>
    <a href="index.html#main">
      <li>Doctor's Daily Dose</li>
    </a>
    <a href="index.html#main">
      <li>Contact</li>
    </a>
  </ul>
</nav>