多下拉子菜单未正确显示答案

【问题标题】：Multi dropdown submenu not showing correctly多下拉子菜单未正确显示
【发布时间】：2015-09-07 18:06:39
【问题描述】：

我正在处理多级下拉菜单。它看起来像下拉菜单中的下拉菜单。当我单击内部下拉菜单时，它不显示右侧，它在菜单下方打开。我想显示内部下拉菜单像楼梯一样右侧。如何解决这个问题？

我的代码在这里

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine
      <b class="caret"></b>
   </a>
   <ul class="dropdown-menu">
       <li class="dropdown-submenu">
         <li><a href="../Home/Emag">Valarum Vinnarasu</a></li>
         <li><a href="#">The Throne</a></li>
       </li>
   </ul>
</li>
<li><a href="../Home/childrenhome">Children Home</a></li>
</ul>
</li>

【问题讨论】：

发布一个包含所有实际代码的工作演示。

标签： html css drop-down-menu twitter-bootstrap-3

【解决方案1】：

你的代码中有标签错误，也许它有帮助。展示你的css，看看你是如何实现下拉的

<ul>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <ul>
          <li><a href="../Home/Emag">Valarum Vinnarasu</a></li>
          <li><a href="#">The Throne</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="../Home/childrenhome">Children Home</a></li>
</ul>

【讨论】：

【解决方案2】：

您可以使用 JavaScript 来做到这一点。

JavaScript 代码示例：

function showNested(caller) {
    var elem = caller;
    var child = $(":first-child", elem);
    if (child.is(":visible"))
       child.hide();
    else
       child.show();
}

和 HTML：

<ul>
   <li>List item one</li>
   <li><a href="#" id="elemId1" onclick="showNested(this);">List item two with subitems:
      <ul id="innerList" style="display: none">
         <li>Subitem 1</li>
         <li>Subitem 2</li>
      </ul>
   </a></li>
   <li>Final list item</li>
</ul>

它是如何工作的：它对 onclick 事件做出反应。当您单击元素时，showNested 函数运行并将调用者作为参数传递。它找到调用者的第一个子元素（内部列表）并显示它。当您再次单击它时，它会隐藏它。您可以将该功能用于少数嵌套列表。您可以使用 onmouseover 事件。

【讨论】：