在 Sidenav 菜单中制作子菜单（ASP.NET MVC）答案

【问题标题】：Make submenu in Sidenav menu(ASP.NET MVC)在 Sidenav 菜单中制作子菜单（ASP.NET MVC）
【发布时间】：2017-06-18 20:32:46
【问题描述】：

我有侧边菜单

这是它的代码

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

还有与之配合使用的 JS

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

我的一个菜单点会有子菜单。

因此，当我单击例如 Findings 时，我需要查看与 Findings 相关的子菜单。

我怎么能意识到这一点？

【问题讨论】：

标签： javascript jquery css asp.net asp.net-mvc

【解决方案1】：

两个快速解决方案：

1. JavaScript

而不是<a href="@Url.Action("Index", "Findings")">Findings</a>

有类似的标记

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

使用类似的样式表

.submenu > .submenu-item { display: none }
.submenu.open > .submenu-item { display: block }

和你的 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>

但是，browser support is not at 100%。

【讨论】：