Javascript Sidenav菜单中的Make子菜单（ASP.NET MVC）_Javascript_Jquery_Css_Asp.net_Asp.net Mvc

Javascript Sidenav菜单中的Make子菜单（ASP.NET MVC）

javascript jquery css asp.net asp.net-mvc

Javascript Sidenav菜单中的Make子菜单（ASP.NET MVC）,javascript,jquery,css,asp.net,asp.net-mvc,Javascript,Jquery,Css,Asp.net,Asp.net Mvc,我有配菜这是它的代码 <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="@Url.Action("Index", "Home")">Home</a> <a href="@Url.Action("In

我有配菜

这是它的代码

 <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="@Url.Action("Index", "Home")">Home</a>
    <a href="@Url.Action("Index", "Calendar")">Calendar</a>
    <a href="@Url.Action("Index", "PatientDatabase")">Patient Database</a>
    <a href="@Url.Action("Index", "Findings")">Findings</a>
    <a href="@Url.Action("Index", "Controlling")">Controlling</a>
    <a href="@Url.Action("Index", "Invoices")">Invoices</a>
</div>

这就是它的工作

    <script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>


函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}

我的一个菜单点将有子菜单

因此，当我单击例如

Findings

时，我需要查看与

Findings

相关的子菜单

如何实现这一点？

两个快速解决方案：

1。JavaScript

而不是

有这样的标记吗

<a class="submenu" href="@Url.Action("Index", "Findings")">
  <p>Findings</p>
  <a class="submenu-item" href="#">Sub menu item</a>
  <a class="submenu-item" href="#">Sub menu item</a>
</a>

和你的JavaScript一样

document.querySelectorAll('.submenu').forEach(function(item) {
  item.addEventListener('click', function(event) {
    event.preventDefault()
    item.classList.toggle('open')
  })
})

这是一个用于隐藏和显示项目的简单JavaScript切换。我将锚定标记保留在顶级项上的原因是，如果JS不这样做，锚定标记仍然有效

2。详细信息标签

HTML有一个显示和隐藏项目的本机标记

<detail>
  <summary>Findings</summary>
  <a href="#">Sub menu item</a>
  <a href="#">Sub menu item</a>
</detail>


调查结果

但是，有两种快速解决方案：