Question

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

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

在Log下，我需要添加三个元素（Add，Edit，Delete）。如何实现这一点。

谢谢，和Manish

Answer 1

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

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

示例：

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

Answer 2

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

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

Answer 3

 <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");
        }
    });

如果您要查找自定义的多级下拉菜单，这将很有用。

如何使用MVC创建菜单/子菜单？

3 个答案: