Question

我从this codepen example复制了代码。子菜单显示精美，而子菜单的子菜单未显示。我删除了一些多余的ul / lis，以便使答覆者轻松看到我的问题，而又不破坏原始作者J.S.内格利。

例如，没有显示 Dropdown Submenu Link 4.1 。

引导程序版本：3.3.0 jQuery版本：1.12.4 Django版本：2.1.5（djangorestframework 3.9.1） Python版本：3.5.0

在我的index.js（和ready函数中）

 $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
    });

在我的头部标签内：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{% load staticfiles %}
<link rel="stylesheet" href='{% static "css/bootstrap/bootstrap.min.css" %}'>
<script src='{% static "js/jquery-1.12.4.js" %}'></script>
<script src='{% static "js/bootstrap.min-3.3.0.js" %}'></script>
<link rel="stylesheet" href='{% static "css/bootstrap/bootstrap.css" %}'>
<link rel="stylesheet" href='{% static "css/index.css" %}'>
<script src='{% static "js/index.js" %}'></script>
<title>MultiLingualNoteTaking</title>

在我的身体标签内：

<div class="container pen" style=""> 
  <div class="row">
    <div class="col-sm-12">

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="#" >MultiLingualNoteTaking</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="#">About</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Create Books<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                      <li><a class="menu-item" id="menu1-createbook" href="#">Step 1. Create Books</a></li>
                      <li><a class="menu-item" id="menu1-createchapter" href="#">Step 2. Create Chapters</a></li>
                      <li><a class="menu-item" id="menu1-createsentence"href="#">Step 3. Create Sentencese</a></li>
                      <li class="divider"></li>
                      <li><a class="menu-item" id="menu1-bookmanage"href="#">Books Management</a></li>

                  </ul>
                  </li>
                  <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Note Categories<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                      <li><a class="menu-item" id="menu1-notecategory" href="#">Create Note Categories</a></li>
                      <li class="divider"></li>
                      <li><a class="menu-item" id="menu1-notecategorymanage"href="#">Category Management</a></li>

                  </ul>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Link 1</a></li>
                      <li><a href="#">Dropdown Link 2</a></li>
                      <li><a href="#">Dropdown Link 3</a></li>
                      <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown Submenu Link 4.1</a></li>
                          <li><a href="#">Dropdown Submenu Link 4.2</a></li>
                          <li><a href="#">Dropdown Submenu Link 4.3</a></li>
                          <li><a href="#">Dropdown Submenu Link 4.4</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
              </ul>
            </div>
        </nav>
    </div>
  </div>
</div>

index.css：

.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
  border-left-color:#555;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}


@media (min-width: 768px) {
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
}

如果我将包含的内容替换为以下代码，则仍然无效。

<script src='https://code.jquery.com/jquery-3.1.0.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

bootstrap 3.3.0：子菜单的子菜单未使用codepen示例显示

0 个答案: