Post
Ask Question
Abhilash J A

Abhilash J A

  • 535
  • 2.4k
  • 596.3k

How can I do multi level dropdown menu in bootstrap ?

May 1 2017 5:57 AM
I am working on MVC 5, there is Multi level dropdown.
 
I have tried below code,
 
  1. <script src="https://code.jquery.com/jquery-2.2.4.js"></script>  
  2. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>  
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>  
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>  
  5. <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />  
  6. <style type="text/css">  
  7.     .multiselect-container {  
  8.         width: 100% !important;  
  9.     }  
  10.    
  11.     .dropdown-submenu {  
  12.         position: relative;  
  13.     }  
  14.    
  15.         .dropdown-submenu .dropdown-menu {  
  16.             top: 0;  
  17.             left: 100%;  
  18.             margin-top: -1px;  
  19.         }  
  20. </style>  
  21. <div class="col-xs-6 col-sm-6 col-md-6" style="" id="divProductDL">  
  22.                                             <div class="form-group">  
  23.                                                 <label for="exampleInputEmail1">Select Product Categories <span class="requireValidate">*</span></label>  
  24.    
  25.                                                   
  26.                                                 <div class="dropdown">  
  27.                                                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">  
  28.                                                         Please select Product  
  29.                                                         <span class="caret"></span>  
  30.                                                     </button>  
  31.    
  32.                                                     <ul class="dropdown-menu">  
  33.                                                                 <li class="dropdown-submenu">  
  34.                                                                     <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Construction Products<span class="caret"></span></a>  
  35.                                                                         <ul class="dropdown-menu" style="display: block;">  
  36.    
  37.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Cement</a></li>  
  38.                                                                         </ul>  
  39.                                                                         <ul class="dropdown-menu">  
  40.    
  41.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Steel</a></li>  
  42.                                                                         </ul>  
  43.                                                                 </li>  
  44.                                                                 <li class="dropdown-submenu">  
  45.                                                                     <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Electrical Products<span class="caret"></span></a>  
  46.                                                                         <ul class="dropdown-menu">  
  47.    
  48.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Cables</a></li>  
  49.                                                                         </ul>  
  50.                                                                         <ul class="dropdown-menu">  
  51.    
  52.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Fans</a></li>  
  53.                                                                         </ul>  
  54.                                                                 </li>  
  55.                                                                 <li class="dropdown-submenu">  
  56.                                                                     <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Plumbing Products<span class="caret"></span></a>  
  57.                                                                         <ul class="dropdown-menu">  
  58.    
  59.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Accessories</a></li>  
  60.                                                                         </ul>  
  61.                                                                         <ul class="dropdown-menu">  
  62.    
  63.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Taps</a></li>  
  64.                                                                         </ul>  
  65.                                                                         <ul class="dropdown-menu">  
  66.    
  67.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Pipes</a></li>  
  68.                                                                         </ul>  
  69.                                                                 </li>  
  70.                                                                 <li class="dropdown-submenu">  
  71.                                                                     <input type="checkbox" name="productcat"><a class="test" tabindex="-1" href="#">Finishing Products<span class="caret"></span></a>  
  72.                                                                         <ul class="dropdown-menu">  
  73.    
  74.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Floor Tiles</a></li>  
  75.                                                                         </ul>  
  76.                                                                         <ul class="dropdown-menu">  
  77.    
  78.                                                                            <li><input type="checkbox" name="productcat"><a tabindex="-1" href="#">Wall Tiles</a></li>  
  79.                                                                         </ul>  
  80.                                                                 </li>  
  81.                                                     </ul>  
  82.                                                 </div>  
  83.                                             </div>  
  84.                                         </div>  
  85. <script type="text/javascript">  
  86.     $(document).ready(function () {  
  87.           
  88.         $('a.test').on("click", function (e) {  
  89.             
  90.             $(this).next('ul').toggle();  
  91.             e.stopPropagation();  
  92.             e.preventDefault();  
  93.         });  
  94.     });  
  95. </script> 
 But not working. how can I do this? please help me...

Answers (2)