Bootstrap Nested Dropdown on Rails - html

Question

I am trying to create a cascading view in dropdown menu ->
/myApp/app/views/layouts/includes/_site-header.html.erb
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Level 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.0.1", "/some_link/link_level_1_0_1" %></li>
<li class="dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Level1.1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.1", "/some_link/link_level_1_1_1" %></li>
</ul>
</li>
</ul>
</li>
Level 1 (top most level) shows up correct, but Level 1.1 nested dropdown, not shows.
How can I use inline CSS to correct this?

Answer 1

You want to make it Nested Dropdown. Here is really good example.
JSFIDDLE
Source from http://jsfiddle.net/chirayu45/yxkut/16/
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</div>
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});