Question

我无法在另一个下拉菜单中找到下拉菜单。第一级下拉列表工作正常，但是对于第二级，当我单击下拉菜单（学习配置文件）的选项时，没有任何反应...菜单无法显示。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <nav id="sideNavBar">
        <ul class="nav nav-pills nav-stacked">
          <li id="navBarTitle">MENU</li>

          <li class="dropdown">
            <a href="Children.html" data-toggle="dropdown" class="droptown-toggle">Children <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li>
                <a href="ChildrenAddChild.html">Add Child</a>
              </li>
              <li>
                <a href="ChildrenAddChild.html">Archive/Delete Child</a>
              </li>
              <li>
                <a href="ChildrenDetails.html">Children Details</a>
              </li>
              <li class="dropdown">
                <a href="ChildrenProfiles.html" data-toggle="dropdown" class="droptown-toggle">Learning Profiles<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="Observations.html">Observations</a>
                  </li>
                  <li>
                    <a href="learningOutcomes.html">Learning Outcomes</a>
                  </li>
                  <li>
                    <a href="Photos.html">Photos</a>
                  </li>
                </ul>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>

Answer 1

html中几乎没有变化

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <nav id="sideNavBar">
                <ul class="nav nav-pills nav-stacked">
                    <li id="navBarTitle">MENU</li>

                    <li class="dropdown">
                        <a href="Children.html" data-toggle="dropdown" class="droptown-toggle">Children <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="ChildrenAddChild.html">Add Child</a>
                            </li>
                            <li>
                                <a href="ChildrenAddChild.html">Archive/Delete Child</a>
                            </li>
                            <li>
                                <a href="ChildrenDetails.html">Children Details</a>
                            </li>
                            <li class ="dropdown-submenu">
                                <a href="#" class="test droptown-toggle" data-toggle="dropdown">Learning Profiles<span class="caret"></span></a>
                                  <ul class="dropdown-menu">
                                      <li>
                                          <a href="Observations.html">Observations</a>
                                      </li>
                                      <li>
                                          <a href="learningOutcomes.html">Learning Outcomes</a>
                                      </li>
                                      <li>
                                          <a href="Photos.html">Photos</a>
                                      </li>
                                  </ul>
                               </a>
                            </li>
                        </ul>
                    </li>
                </ul>
           </nav>
       </div>
  </div>

并添加以下css

   .dropdown-submenu {
     position: relative;
    }
   .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
   }

您还需要添加javascript

$(document).ready(function(){
 $('.dropdown-submenu a.test').on("click", function(e){
 $(this).next('ul').toggle();
 e.stopPropagation();
 e.preventDefault();
 });
});

work plunker：https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview

另一个下拉菜单中的下拉菜单无效

1 个答案: