Question

我有一个包含一些菜单项的侧边菜单。

一个菜单项可以包含一些子菜单项

以下是我如何实现这个

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

我需要点击一个菜单项，它会显示子菜单项，如果我再次点击它会隐藏它们。我怎么能意识到这一点？

Answer 1

＆lt; p＆gt;如果您使用bootstrap，那么使用它很容易。＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt;＆lt; div id =＆＃34; mySidenav＆＃34; class =＆＃34; sidenav mainmenu＆＃34;＆gt; ＆lt; a href =＆＃34; javascript：void（0）＆＃34;类=＆＃34;为closeBtn＆＃34;的onclick =＆＃34; closeNav（）＆＃34;＆GT;＆安培;倍;＆LT; / A＆GT; ＆lt; a href =＆＃34; @ Url.Action（＆＃34; Index＆＃34;，＆＃34; Home＆＃34;）＆＃34;＆gt; Home＆lt; / a＆gt; ＆lt;！ - 我的更改从此处开始 - ＆gt; ＆lt; li data-toggle =＆＃34; collapse＆＃34; data-target =＆＃34; #test＆＃34;＆gt;＆lt; a href =＆＃34; @ Url.Action（＆＃34; Index＆＃34;，＆＃34; Calendar＆＃34;）＆＃34 ;＆GT;日历＆LT; / A＆GT; ＆lt; ul class =＆＃34;子菜单崩溃＆＃34; ID =＆＃34;测试＆＃34;＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; @ Url.Action（＆＃34; SheduleNewAppointment＆＃34;，＆＃34; Calendar＆＃34;）＆＃34;＆gt; - Shedule新约会＆lt; / a＆gt; ＆LT; /锂＆GT; ＆LT; / UL＆GT; ＆LT; /锂＆GT; ＆lt; a href =＆＃34; @ Url.Action（＆＃34;索引＆＃34;，＆＃34; PatientDatabase＆＃34;）＆＃34;＆gt;患者数据库＆lt; / a＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34; @ Url.Action（＆＃34; Index＆＃34;，＆＃34; Findings＆＃34;）＆＃34;＆gt; Findings＆lt; / a＆gt; ＆lt; ul class =＆＃34;子菜单＆＃34;＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 所有调查结果＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 打开调查结果＆lt; / a＆gt;＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; @ Url.Action（＆＃34;索引＆＃34;，＆＃34;控制＆＃34;）＆＃34;＆gt;控制＆lt; / a＆gt; ＆lt; ul class =＆＃34;子菜单＆＃34;＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 患者＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 医疗合作伙伴＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 内部控制＆lt; / a＆gt;＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; @ Url.Action（＆＃34; Index＆＃34;，＆＃34; Invoices＆＃34;）＆＃34;＆gt; Invoices＆lt; / a＆gt; ＆lt; ul class =＆＃34;子菜单＆＃34;＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34;＆＃34;＆gt; - 收到付款＆lt; / a＆gt;＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT; /锂＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;来源：＆lt; a href =＆＃34; https://www.w3schools.com/bootstrap/bootstrap_collapse.asp" rel =＆＃34; nofollow noreferrer＆＃34;＆gt; https：//www.w3schools.com/bootstrap/bootstrap_collapse.asp< / a＆gt;＆lt; / p＆gt;

Answer 2

看到这里我申请点击甚至不打开，因为在锚点上你添加了其他页面的网址，所以22事件没有在同一个元素上被触发。检查并且如果有任何问题让我知道

＆＃13;

$(document).ready(function() {
  $('.main_wrapper li').on('click', function() {
    $(this).children('.submenu').slideToggle();
  });
});

＆＃13;

.submenu {
  display: none;
}

ul li {
  background-color: #000;
  margin-bottom: 5px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  <ul class="main_wrapper">
    <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>
    <li><a href="@Url.Action(" Index ", "PatientDatabase ")">Patient Database</a></li>
    <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>
  </ul>

＆＃13;

单击HTML显示/隐藏子菜单

2 个答案: