asp.net-mvc 如何使用 MVC 创建菜单/子菜单？

How to create menu/submenu using MVC?

提问by Manish

I need to create a menu(parent) with three subelements like (Add,Edit,Delete).

我需要创建一个包含三个子元素（例如（添加、编辑、删除））的菜单（父）。

                <li ><%= Html.ActionLink("Log", "Index", "Log")%></li>
                <li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>          
     </ul>

Under Log I need to add three elements (Add,Edit,Delete). How to achieve that.

在日志下，我需要添加三个元素（添加、编辑、删除）。如何实现这一目标。

Thanks, Manish

谢谢，曼尼什

回答by Gone Coding

The first matching SO answer from Google appeared to be incomplete, so here is a minimal set of options to add a submenu in later versionsof MVC that use Bootstrap:

来自 Google 的第一个匹配的 SO 答案似乎不完整，因此这里有一组最小的选项，用于在使用 Bootstrap 的更高版本的 MVC 中添加子菜单：

• Submenus are implemented using nested lists
• A dummy link is used for the parent option
  • The link has a class of dropdown-toggle
  • The link has an attribute of data-toggle="dropdown"
• The nested ULhas a class of dropdown-menu(without this the submenu is always visible)

• 子菜单使用嵌套列表实现
• 虚拟链接用于父选项
  • 该链接有一类 dropdown-toggle
  • 该链接有一个属性 data-toggle="dropdown"
• 嵌套UL有一个类dropdown-menu（没有这个子菜单总是可见的）

Example:

例子：

<ul>
  <li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Log</a>
    <ul class="dropdown-menu">
      <li><%= Html.ActionLink("Add", "Add", "Log")%></li>
      <li><%= Html.ActionLink("Edit", "Edit", "Log")%></li>
      <li><%= Html.ActionLink("Delete", "Delete", "Log")%></li>
    </ul>
  </li>
  <li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>
</ul>

回答by Annabelle

Submenus are typically implemented with nested lists:

子菜单通常使用嵌套列表实现：

<ul>
  <li>
    <%= Html.ActionLink("Log", "Index", "Log")%>
    <ul>
      <li><%= Html.ActionLink("Add", "Add", "Log")%></li>
      <li><%= Html.ActionLink("Edit", "Edit", "Log")%></li>
      <li><%= Html.ActionLink("Delete", "Delete", "Log")%></li>
    </ul>
  </li>
  <li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>
</ul>

回答by Ishan

 <li>
    <a class="DrT" data-target="Sub">Menu</a>
        <ul class="dropdown-menu" id="Sub" style="display:none">
            <li><a>Sub-Main 001</a></li>
            <li><a>Sub-Main 002</a></li>
            <li><a>Sub-Main 003</a></li>
            <li class="dropdown">
               <a class="DrT" data-target="SubSub">Sub-Main</a>
                  <ul class="dropdown-menu submenu" id="SubSub" style="display:none">
                       <li><a>Sub Sub-Main 001</a></li>
                       <li><a>Sub Sub-Main 002</a></li>
                       <li><a>Sub Sub-Main 003</a></li>
                       <li class="dropdown">
                         <a class="DrT" data-target="SubSubSub">Sub Sub-Main</a>
                           <ul class="dropdown-menu submenu" id="SubSubSub" style="display:none">
                                  <li><a>Sub Sub Sub-Main 001</a></li>
                                  <li><a>Sub Sub Sub-Main 002</a></li>
                                  <li><a>Sub Sub Sub-Main 003</a></li>
                           </ul>
                       </li>
                   </ul>
                </li>
             </ul>
          </li>
     ul.submenu {
            margin-top:-20%;
            margin-left:100%;
        }

 $(".DrT").click(function () {
        debugger;
        var target = this.getAttribute("data-target");
        var x = document.getElementById(target);
        if (x.style.display == "none")
        {
            x.style.display = "block";
        }
        else
        {
            x.style.display = "none";
        }
    });
    $(document).click(function (e) {
        var Target = e.target.className;
        if (Target != "DrT")
        {
            $("ul.dropdown-menu").css("display","none");
        }
    });

This can be useful if you are looking for custom multilevel dropdown menus.

如果您正在寻找自定义的多级下拉菜单，这会很有用。