制作子（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> 

标记与像

样式表

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