[Bootstrap]- Odd behavior when Dropdown used with Collapse

Question

I am fairly new with the development using Bootstrap and I have been trying to create a dropdown which has the feature of collapsible such that any sub item with the dropdown can be shown within the collapsible container.

I found some code online which pretty much explains what i am trying to accomplish: https://www.bootply.com/1u6VW4bsrR

I tried to write down few lines of HTML code to accomplish similar to above:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
     <li>
       <a data-toggle="collapse" href="#collapse1">HTML</a>
       <div id="collapse1" class="panel-collapse collapse">
         <div class="panel-body">
           <ul class='dropdown-menu sub-menu'>
             <li><a>Type 1</a></li>
             <li><a>Type 2</a></li>
           </ul>
         </div>
       </div>
    </li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
 </ul>
</div>

Codepen link: https://codepen.io/anon/pen/weLKzp/?editors=1010

But it is giving me hard time. There are two specific behavior that i noticed:

1. When i click on dropdown, and following after click on collapsible div(HTML), then the dropdown disappears. When clicked back on the dropdown, it is getting shown.
2. When the dropdown is shown having collapsible div, all the sub-items with the collapsible panel body doesn't appear.

Can you help me figuring out where are the changes required and what i am doing wrong? Any pointers are appreciated.

Thanks!

Answer 1

In this example, I created a .dropdown-submenu class for multi-level dropdowns

Note that I added jQuery to open the multi-level dropdown on click.

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script>