Question

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

但下面是代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你需要一些javascript来实现这个目的：

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

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

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

下拉列表中的下拉列表

1 个答案: