Javascript 通过单击HTML显示/隐藏子菜单

我有一份附带菜单和一些菜单项

一个菜单项可以有一些子菜单项

以下是我如何认识到这一点的

<div id="mySidenav" class="sidenav mainmenu">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="@Url.Action("Index", "Home")">Home</a>
<li><a href="@Url.Action("Index", "Calendar")">Calendar</a>
    <ul class="submenu">
        <li><a href="@Url.Action("SheduleNewAppointment", "Calendar")">- Shedule new appointment</a></li>
    </ul>
</li>
<a href="@Url.Action("Index", "PatientDatabase")">Patient Database</a>
<li><a href="@Url.Action("Index", "Findings")">Findings</a>
    <ul class="submenu">
        <li><a href="">- All Findings</a></li>
        <li><a href="">- Open Findings</a></li>
    </ul>
</li>
<li><a href="@Url.Action("Index", "Controlling")">Controlling</a>
    <ul class="submenu">
        <li><a href="">- Patients</a></li>
        <li><a href="">- Medical Partners</a></li>
        <li><a href="">- Internal Controlling</a></li>
    </ul>
</li>
<li><a href="@Url.Action("Index", "Invoices")">Invoices</a>
    <ul class="submenu">
        <li><a href="">- Receipt of payment</a></li>
</ul>
</li>

---

我需要点击一个菜单项，它将显示子菜单项，如果我再次点击，它将隐藏它们。如何实现这一点？

如果使用引导，那么使用它将很容易

<div id="mySidenav" class="sidenav mainmenu">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="@Url.Action("Index", "Home")">Home</a>
 <!-- my changes starts here -->  
 <li  data-toggle="collapse" data-target="#test"><a href="@Url.Action("Index", "Calendar")">Calendar</a>
        <ul class="submenu collapse" id="test">
            <li><a href="@Url.Action("SheduleNewAppointment", "Calendar")">- Shedule new appointment</a></li>
        </ul>
    </li>
    <a href="@Url.Action("Index", "PatientDatabase")">Patient Database</a>
    <li><a href="@Url.Action("Index", "Findings")">Findings</a>
        <ul class="submenu">
            <li><a href="">- All Findings</a></li>
            <li><a href="">- Open Findings</a></li>
        </ul>
    </li>
    <li><a href="@Url.Action("Index", "Controlling")">Controlling</a>
        <ul class="submenu">
            <li><a href="">- Patients</a></li>
            <li><a href="">- Medical Partners</a></li>
            <li><a href="">- Internal Controlling</a></li>
        </ul>
    </li>
    <li><a href="@Url.Action("Index", "Invoices")">Invoices</a>
        <ul class="submenu">
            <li><a href="">- Receipt of payment</a></li>
    </ul>
    </li>

---

来源：

请参阅此处我应用即使单击li也不打开，因为在anchor上您添加了其他页面的url，因此22个事件未在同一元素上触发。签出，如果有任何问题，请通知我

$（文档）.ready（函数（）{
$（'.main_包装器li'）。在（'click'，function（）上{
$（this）.children（'.submenu'）.slideToggle（）；
});
});
。子菜单{
显示：无；
}
ulli{
背景色：#000；
边缘底部：5px；
光标：指针；
}


























您不能在单击时执行此操作，因为第一个元素是链接。所以点击它就会打开链接。也许悬停是个更好的主意？当然你可以在锚定标签上捕捉点击事件。要阻止默认操作（重定向到href url），只需
返回false。是否要阻止菜单项的基本功能？似乎是一些未来的菜单想法当我点击
时，它会进入链接而不是打开子项a但如果你点击锚定标签，它就会打开我选中了它。我的意思是当你点击日历，它就会打开相关链接，但当你点击li时，子菜单会显示。。你拿到了吗。。因为我们不能在同一个元素上执行两件事。