隐藏模板 HTML 和 JS 中的侧边栏菜单

Question

我正在尝试为我的第一个网页编辑模板，它有一个响应式侧边栏菜单，其中包含主页、联系人等部分。 当我按下每个选项时，网页向下滚动到愿望部分，但菜单留在那里。如何编辑它，使菜单继续执行相同的功能，但在单击后消失？我尝试从模板中读取脚本文件，这对我来说非常复杂......这是HTML部分，菜单是：

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="navbar-collapse" style = "float: right;">
<button type="button" class="close" aria-label="Close" ><span aria-hidden="true" >&times;</span></button>

<ul class="nav navbar-nav navbar-right"  >
<li style ="font-weight: 500; font-size: 20px; font-family: 'Oswald', sans-serif;"  ><a href="./index.html#quienes-somos" title="Quienes-Somos" class="anchor-link" >¿Quiénes somos?  </a></li>
<li style ="font-weight: 500; font-size: 20px; font-family: 'Oswald', sans-serif;" ><a href="./index.html#responsibilidad-section-container" title="Responsabilidad_social" class="anchor-link">Responsabilidad social</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;"  ><a href="./index.html#proyectos-section-container" title="Proyectos" class="anchor-link">Proyectos</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;" ><a href="./index.html#clientes-section-container" title="Clientes" class="anchor-link">Clientes</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;" ><a href="./index.html#contact-section-container" title="Contactanos" class="anchor-link">Contáctanos</a></li>

</ul>

</div>
</div>
</nav>

我尝试添加脚本：

<script>
$("nav li").click(function () {
$(".navbar-right").hide();
});
</script>

以及UL(导航导航栏-导航栏-右(的所有不同类，以及每个人，如果有人可以帮助我，那将是非常有帮助的，这是行不通的。

非常感谢

Answer 1

试试这个

$(document).ready(function(){
$(".close").click(function () {
$(".navbar-right").hide();
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="navbar-collapse" style = "float: right;">
<button type="button" class="close" aria-label="Close" ><span aria-hidden="true" >&times;</span></button>

<ul class="nav navbar-nav navbar-right"  >
<li style ="font-weight: 500; font-size: 20px; font-family: 'Oswald', sans-serif;"  ><a href="./index.html#quienes-somos" title="Quienes-Somos" class="anchor-link" >¿Quiénes somos?  </a></li>
<li style ="font-weight: 500; font-size: 20px; font-family: 'Oswald', sans-serif;" ><a href="./index.html#responsibilidad-section-container" title="Responsabilidad_social" class="anchor-link">Responsabilidad social</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;"  ><a href="./index.html#proyectos-section-container" title="Proyectos" class="anchor-link">Proyectos</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;" ><a href="./index.html#clientes-section-container" title="Clientes" class="anchor-link">Clientes</a></li>
<li style ="font-weight: 500; font-size: 20px;font-family: 'Oswald', sans-serif;" ><a href="./index.html#contact-section-container" title="Contactanos" class="anchor-link">Contáctanos</a></li>

</ul>

</div>
</div>
</nav>