javascript - Dropdown inside dropdown - Stack Overflow|Programmer puzzle solving

I have a navbar with a main dropdown li tag called A, then when I display the dropdown it shows A-1 and A-2 options, A-2 it's another dropdown with other options, I tried copying the same code like if was a main dropdown but doesn't works properly, I have the code right here

However below is the code.

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

});

<script src=".1.1/jquery.min.js"></script>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".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>

However below is the code.

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

});

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

Share Improve this question edited Aug 18, 2017 at 13:49 asked Aug 18, 2017 at 13:30 User1899289003 8722 gold badges24 silver badges47 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You will need some javascript for this to work:

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

Here is the explanation regarding the above code:
Once you click on an anchor that has the dropdown-toggle class (which mean - it's an anchor that should open the next drop-down menu) - set the class open on the above li element (which tells the next-menu to open) and prevent the default behavior of the current element.

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

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

Programmer puzzle solving

javascript - Dropdown inside dropdown - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)