javascript - 在 Sidenav 菜单中创建子菜单(ASP.NET MVC)

Question

我有侧边菜单

代码如下

 <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 的子菜单。

我如何实现这一点？

Answer 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 切换。我将 anchor 标记保留在顶级元素上的原因是，如果 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% .