下拉菜单内的下拉菜单

Question

我有一个导航栏，其中有一个名为 A 的主下拉 li 标签，然后当我显示下拉菜单时，它会显示 A-1 和 A-2 选项，A-2 它是另一个带有其他选项的下拉菜单，我尝试复制相同的代码，例如如果是主下拉列表但不能正常工作，我的代码是正确的here

但是下面是代码。

$(document).ready(function () {
  console.log("Hi...");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-static-top" id="Nav">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">APBPV</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">A <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">A-1</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">A-2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">A-2-1</a></li>
                                    <li><a href="#">A-2-2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

你需要一些 javascript 才能工作：

$(document).ready(function(){
  $('a.dropdown-toggle').on("click", function(e){
    $(this).closest('li').toggleClass('open');
    e.stopPropagation();
    e.preventDefault();
  });
});

以下是对上述代码的解释：
一旦您单击具有下拉切换类的锚点（这意味着 - 它是一个应该打开下一个下拉菜单的锚点） - 在上面的 li 元素上设置类 open （它告诉下一个-菜单打开）并阻止当前元素的默认行为。

$(document).ready(function(){
  $('a.dropdown-toggle').on("click", function(e){
    $(this).closest('li').toggleClass('open');
    e.stopPropagation();
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-static-top" id="Nav">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">APBPV</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">A <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">A-1</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">A-2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">A-2-1</a></li>
                                    <li><a href="#">A-2-2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>