点击列表项时，删除移动菜单

Posted 2021-05-03

这是我的第一个问题，所以如果不按照标准做法，请原谅。

我需要帮助这个移动导航菜单。我得到了下面的youtube视频的代码，问题是，虽然它是一个纯CSS移动导航的良好尝试，但当项目列表时，菜单不会自动删除。问题是，虽然这是一个很好的纯CSS移动导航的尝试，但当一个列表项被点击时，菜单不会自动删除。

.nav {
  opacity: 1;
  position: fixed;
  z-index: 999;
  border-bottom: 1px solid #EAEAEB;
  text-align: right;
  height: 70px;
  line-height: 70px;
  width: 100%;
  background: rgb(66,65,65);
  background: grey;
  transition: all 1s ease;
}

.menu {
  margin: 0 30px 0 0;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
  line-height: 70px;
  font-size: 2em;
  transition: all 0.5s ease;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

  @media (max-width: 850px) { 
    .ml14 {
      font-size: 5em;
    }
    label {
      display: block;
      cursor: pointer;
    }

    .menu {
      text-align: center;
      width: 100%;
      display: none;
    }
    
    .menu a {
      display: block;
      border-bottom: 1px solid #EAEAEB;
      margin: 0;
      background: rgb(66,65,65);
      background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
    }

    #toggle:checked ~ .menu {
      display: block;
    }

    <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a class="section1" href="#">About</a>
            <a class="contact-sec" href="#">Contact</a>
            <a class="section3" href="#">Gallery</a>   
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href=""><i class="fa fa-instagram fa-5x"></i></a>
        </div>
    </div>

菜单的代码

Youtube视频显示菜单的原始来源

答案

我简单的添加功能，当点击链接输入检查将是假的，菜单关闭。

function CloseMenu(){
 document.getElementById("toggle").checked = false;
 
 }

.nav {
  opacity: 1;
  position: fixed;
  z-index: 999;
  border-bottom: 1px solid #EAEAEB;
  text-align: right;
  height: 70px;
  line-height: 70px;
  width: 100%;
  background: rgb(66,65,65);
  background: grey;
  transition: all 1s ease;
}

.menu {
  margin: 0 30px 0 0;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
  line-height: 70px;
  font-size: 2em;
  transition: all 0.5s ease;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

  @media (max-width: 850px) { 
    .ml14 {
      font-size: 5em;
    }
    label {
      display: block;
      cursor: pointer;
    }

    .menu {
      text-align: center;
      width: 100%;
      display: none;
    }
    
    .menu a {
      display: block;
      border-bottom: 1px solid #EAEAEB;
      margin: 0;
      background: rgb(66,65,65);
      background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
    }

    #toggle:checked ~ .menu {
      display: block;
    }

<div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu" id="menu">
            <a class="section1" href="#" onclick="CloseMenu()">About</a>
            <a class="contact-sec" href="#" onclick="CloseMenu()">Contact</a>
            <a class="section3" href="#" onclick="CloseMenu()">Gallery</a>   
            <a href="#"><i class="fab fa-facebook" onclick="CloseMenu()"></i></a>
            <a href=""><i class="fa fa-instagram fa-5x" onclick="CloseMenu()"></i></a>
        </div>
    </div>

以上是关于点击列表项时，删除移动菜单的主要内容，如果未能解决你的问题，请参考以下文章

选择导航菜单项时不会替换上一个片段

无法接收点击片段中的菜单项

未创建 Android listview 内容视图

用另一个列表替换主活动中的列表并从视图中删除旧列表

我想在每次选择底部导航项时初始化片段

Android片段中的问题：仍然单击上一个片段