Javascript 向HTML锚添加多个操作

PS-X通常是一个字体可怕的3条图标。单击它以获得菜单下拉列表

我也知道代码很混乱，我现在正在将其重建为一个更干净的版本

<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>

---

这是我的手机级菜单

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

我想将其设置为这样：

按X键打开菜单

选择要滚动到的链接

在“选择链接”上，会发生两个操作：滚动到目标并关闭菜单

我该如何实现这一点？我是一个JS新手，目前只知道编辑插入到构建中的插件/代码片段

---

谢谢您的帮助。

根据您的JSFIDLE，您似乎被第3点卡住了，这意味着滚动到目标并关闭菜单

滚动至目标

好消息是，滚动到目标不需要任何Javascript。 我想你知道HTML书签链接

连接到一个div，如

因此，跳转到部分由浏览器直接处理

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

body {
    scroll-behavior: smooth;
}

关闭菜单

由于打开由一个复选框控制，该复选框用CSS委托打开菜单，因此您只需要一个JS来取消选中它。 检查这里，代码非常简单

$（文档）.ready（函数（）{
$（“.menu bar”）。在（“单击”，函数（）{
美元（“nav ul”）。切换类别（“显示”）；
});
$（“nav ul li”）。在（“单击”，函数（）{
$（“nav ul”）.removeClass（“显示”）；
});
});
nav-ul{
宽度：100%；
背景色：#ac5463；
溢出：隐藏；
颜色：#fff；
填充：0；
文本对齐：居中；
保证金：0；
过渡：所有200ms的缓进缓出；
}
李国荣{
显示：内联块；
填充：20px；
}
海军ulli a{
文字装饰：无；
颜色：继承；
}
nav ul li:悬停{
背景色：#ac5480；
}
.菜单栏{
宽度：100%；
背景色：#005c48；
文本对齐：右对齐；
框阴影：边框框；
填充：20px 0px；
光标：指针；
颜色：#fff；
显示：无；
}
.菜单栏{
右边距：20px；
}
导航ul{
最大高度：0px；
位置：固定；
顶部：4.5em；
}
李国荣{
框大小：边框框；
宽度：100%；
填充：15px；
文本对齐：左对齐；
}
.菜单栏{
显示：块；
位置：固定；
排名：0；
}
.展示{
最大高度：20em；
位置：固定；
顶部：4.5em；
}
.第十一节内容{
高度：400px；
背景色：#中交；
填充顶部：60px；
}
.jquery{
背景颜色：黄色；
}
.剧本{
背景色：红色；
}
.net{
背景色：黑色；
}
.联系方式{
背景颜色：灰色；
}
.关于{
背景色：#F2F2；
}










家
jQuery
剧本
网
接触
关于
到目前为止您试过什么吗？+你有像jQuery这样的项目库吗？或者你的目标是纯JS解决方案吗？我很迷茫，因为我不太了解JS。我可以看到onclick有很多选项，但我不知道如何设置它。如果你能朝正确的方向轻推一下，我会非常感激。“我不知道如何设置”…你有没有尝试过任何教程或找到任何例子？在线上有数百种方法可以向你展示如何处理点击事件。如果你刚开始学习，最好去上一门课程，而不是随便问一些关于小问题的问题。是的，但这是一种非常简单的方法。没有什么复杂的我认为@Zakalwe可以理解。正如OP提到的，他们才刚刚开始，你甚至不能假设他们知道jQuery是什么。你至少应该解释你的代码，而不是仅仅把它扔进问题中，对于初学者来说，没有什么是显而易见的，即使是很小的事情。最好是先真正地学习香草JS。当然是我的意见。是的，你是对的@ADyson。下次我会记得的。谢谢：）你仍然可以编辑这个答案并改进它，不需要放弃它并等待下一次，但是没有JS没有办法取消选中复选框，不是吗？我会改进答案，但必须使用JS。Scroll to target当前正在运行，我只是没有在代码中包含它。它将JS连接到数据滚动条上，该数据滚动条可平滑滚动到#标记。谢谢你！第二部分关闭菜单看起来是一个非常可能的解决方案。我会尝试一下，然后回来报告，TYVM！完美的使用此小提琴中的数据将onclick添加到汉堡和每个菜单链接中。现在它以汉堡开始，以选择的链接结束。我想我以后可能需要调整它，使它也接近汉堡包，但现在这样就可以了。Tyvm把最后一部分也算出来了！非常感谢，我真的很挣扎。：）
body {
    scroll-behavior: smooth;
}