Question

PS-X通常是3个Font Awesome栏图标。单击它以显示菜单下拉菜单。

我也知道代码是一团糟，我现在正在将其重建为更简洁的版本。

<nav>
    <label for="toggle"> <span>X</span> </label>
<input id="toggle" type="checkbox" />
<div class="mobnavtxt to-be-changed">
    <a data-scroll href="#about">ABOUT</a>
    <a data-scroll href="#services">SERVICES</a>
    <a data-scroll href="#blog1">BLOG</a>
    <a data-scroll href="#blog2">REVIEWS</a>
    <a data-scroll href="#contact">CONTACT</a>
    <span class="links">
        <a href="#"><i class="fa fa-facebook"></i>
        </a>
        <a href="#"><i class="fa fa-instagram"></i>
        </a>
        <a href="#"><i class="fa fa-twitter"></i>
        </a>
        </span>
    <!-- links -->
    <span class="email"><a href="mailto: email@email.com">email@email.com</a></span>
</div>
<!-- mobnavtxt -->
</nav>

.mobnavtxt {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    z-index: -1;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    padding: 50PX 30px 30PX 40PX;
    box-sizing: border-box;
    transition: .2s;
}

.mobnavtxt .links {
    margin: 15px 0;
    letter-spacing: 10px;
}

.mobnavtxt a {
    text-decoration: none;
    color: #222;
}

label {
    background: #fff;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]~.to-be-changed {
    top: -60vh;
}

input[type=checkbox]:checked~.to-be-changed {
    top: 0;
}

nav {
    width: 100%;
    height: 50px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

这是我的移动级别菜单。

当前，我需要按X来打开菜单，我选择了一个设置为滚动到位置的链接，然后需要再次按X来关闭菜单。

我想进行设置，以便发生这种情况：

按X打开菜单
选择要滚动到的链接。
在选择链接上，发生两个操作：滚动到目标，菜单关闭。

如何添加实现此目标？我是JS新手，目前只知道足以编辑自己切入构建中的插件/代码段。

感谢您的帮助。

Answer 1

根据您的JSFiddle，似乎您停留在第3点，这意味着滚动到目标位置并关闭菜单。

滚动到目标

对您来说是个好消息，滚动至目标位置不需要任何Javascript。我认为您了解HTML书签链接

<a href="#my-id">My link</a>连接到像<div id="my-id">这样的div 因此，跳转到该部分直接由浏览器处理

W3C Sample of Bookmark link

可以通过将此CSS属性添加到您的页面来实现滚动效果

body {
    scroll-behavior: smooth;
}

关闭菜单

由于打开是由一个复选框决定的，该复选框使用CSS代表菜单的打开，因此只需要一个JS即可取消选中它。为此，请在此处检查代码很简单

Check/Uncheck checkbox with JavaScript?

Answer 2

$(document).ready(function(){
  $(".menu-bars").on("click", function(){
    $("nav ul").toggleClass("showing");
  });

  $("nav ul li").on("click", function(){
    $("nav ul").removeClass("showing");
  });
});

nav ul{
  width: 100%;
  background-color: #ac5463;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  transition: all 200ms ease-in-out;
}

nav ul li{
  display: inline-block;
  padding: 20px;
}

nav ul li a{
  text-decoration: none;
  color: inherit;
}

nav ul li:hover {
  background-color: #ac5480;
}

.menu-bars{
  width: 100%;
  background-color: #005c48;
  text-align: right;
  box-shadow: border-box;
  padding: 20px 0px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu-bars .fas{
  margin-right: 20px;
}

nav ul{
    max-height: 0px;
    position: fixed;
    top: 4.5em;
  }

  nav ul li{
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
  }

  .menu-bars{
    display: block;
    position: fixed;
    top: 0;
  }

  .showing{
    max-height: 20em;
    position: fixed;
    top: 4.5em;
  }
  .section_content{
  height: 400px;
background-color: #cccccc;
padding-top: 60px;
  }
  .jquery{
  background-color: yellow;
  }
  .script{
  background-color: red;
  }
  .net{
  background-color: black;
  }
  .contact{
  background-color: grey;
  }
  .about{
  background-color: #f2f2f2;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" >

<nav>
  <div class="menu-bars">
    <i class="fas fa-bars fa-2x"></i>  
  </div>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#jQuery">jQuery</a></li>
    <li><a href="#script">Script</a></li>
    <li><a href="#net">Net</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

<div class="section_content" id="home">
<h2>Home</h2>
</div>
<div class="section_content jquery" id="jQuery">
<h2>jQuery</h2>
</div>
<div class="section_content script" id="script">
<h2>Script</h2>
</div>
<div class="section_content net" id="net">
<h2>Net</h2>
</div>
<div class="section_content contact" id="contact">
<h2>Contact</h2>
</div>
<div class="section_content about" id="about">
<h2>About</h2>
</div>

我已经解决了你的问题。希望它能帮助您达成目标。单击条形图标时，菜单将自动打开和关闭。

向HTML锚点添加多个操作

2 个答案: