jQuery - add bootstrap dropdown classes to existing UL LI menu structure

Question

I think my issue can be solved with jQuery.

Situation:

I have a certain CMS (photostore script). It has a categories menu item. Categories can be added by users, and moved and deleted by admins. So, the structure and hierarchy is changing. The output results in a cascading UL/LI. I can't and won't change any core PHP file, so I guess parsing the UL/LI, and adding the necessary bootstrap CSS classes is a good alternative. Does it make sense?

Hint:

The main nav is a UL/LI itself! This main nav includes 3 UL/LI submenu items. The following category UL is one of them. It has no special class, nor an ID! The other two submenus should not be harmed/touched.

A core sample category menu structure looks like this:

<ul>
<li><a href="/category/nature.html" title="Nature">Nature</a>
    <ul>
        <li><a href="/category/animals.html" title="Animals">Animals</a>
        <ul>
        <li><a href="/category/birds.html" title="Birds">Birds</a></li>
        <li><a href="/category/cats.html" title="Cats">Cats</a></li>
        </ul>
        </li>
    </ul>
</li>
<li><a href="/category/test.html" title="Test">Test</a></li>
<li><a href="/category/cities.html" title="Cities">Cities</a>
    <ul>
      <li><a href="/category/architecture.html" title="Architecture">Architecture</a</li>
      <li><a href="/category/firenze.html" title="Firenze">Firenze</a></li>
      <li><a href="/category/venezia.html" title="Venezia">Venezia</a></li>
    </ul>
</li>
<li><a href="/category/movies.html" title="Movies">Movies</a></li>
<li><a href="/category/sounds.html" title="Sounds">Sounds</a></li>
<li><a href="/category/illustrations.html" title="Illustrations">Illustrations</a>
    <ul>
<li><a href="/category/vector.html" title="Vector">Vector</a></li>
    </ul>
</li>
<li><a href="/category/misc.html" title="Misc">Misc</a></li>
</ul>

Question:

Is it possible to apply the Bootstrap CSS classes on client side? Even on the dynamic structure? http://twitter.github.com/bootstrap/components.html#dropdowns

Idea 1 and task:

I would need this class on the FIRST UL only. Important to add it on FIRST, because the core script uses a single UL in output routine.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

If a SUBcategory LI contains a new UL … it just needs:

<li class="dropdown-submenu">

It seems the bootstrap submenu needs an additional link (a-tag). Inserted before the UL submenu.

The bootstrap sample structure looks like this:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul> 

Idea 2 and task:

If idea 1 is to complex or un-predictable. It should work with a simpler solution. Just 1 level and the drop-down-effect. So, the whole menu shows-up as an unfolded tree.

Answer 1

Changing bootstrap menu to sample ul li menu

 $('ul li:has(ul)').addClass('dropdown');
 $('ul li:has(ul) ul').addClass('dropdown-menu');
 $('ul li a:has(ul)').addClass('dropdown-toggle');
 $(".dropdown a").attr("data-toggle", "dropdown");
 $(".dropdown-menu a").removeAttr("data-toggle", "dropdown");

Answer 2

You can do this on client side without any problems. For example:

$(function(){        

    $("ul").addClass("dropdown-menu");    

    var menu = $("ul").first()               
            .attr("role", "menu")
            .attr("aria-labelledby", "dropdownMenu")

    $("a").attr("tabindex", "-1");    

    $("li").has("ul").addClass("dropdown-submenu");   

    $("<div/>").addClass("dropdown clearfix").appendTo("body").append($(menu));

});

See working example on jsFiddle

Answer 3

Anyone find a suitable solution? I am trying to accomplish the same thing and so far the last solution comes close but it does not add the caret and wanted to know if there was a better solution.

This is what comes close...

$('ul li:has(ul)').addClass('dropdown');
$('ul li:has(ul) ul').addClass('dropdown-menu');
$('ul li a:has(ul)').addClass('dropdown-toggle');
$(".dropdown a").attr("data-toggle", "dropdown");
$(".dropdown-menu a").removeAttr("data-toggle", "dropdown");