CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Wesley Reuel Marques Silva
Wesley Reuel Marques Silva

Reputation: 93

Dynamic Menu with UL and LI Bootstrap

I'm looking to get the li parent of a ul.

The ul that I want will have class="level3 dropdown-menu dynamic".

When I find something like this, I will need to add another class to it. The parent of the class to be added to the li will be class="dropdown-submenu".

How can I do this with jquery? I have tried some and none work the way I want. Follow the code of the Menu which is generated automatically, also follow the jquery which create the Menu.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<a href="#Menu2_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a>
<div id="Menu2" style="float: left;">
    <ul class="level1 nav navbar-nav static" tabindex="0" role="menubar" style="position: relative; width: auto; float: left;">
        <li class="dropdown-toggle open" aria-haspopup="Menu2:submenu:2" role="menuitem" style="">
            <a class="popout level1 static" href="javascript:;" tabindex="-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Services</a>
            <ul class="level2 dropdown-menu dynamic" id="Menu2:submenu:2" style="">
                <li class="dropdown-toggle" aria-haspopup="Menu2:submenu:3" role="menuitem" style="">
                    <a class="popout level2 dynamic" href="#" tabindex="-1">Consulting</a>
                    <ul class="level3 dropdown-menu dynamic" id="Menu2:submenu:3" style="">
                        <li role="menuitem" class="dynamic" style="">
                            <a class="level3 dynamic" href="dutsourcing.aspx" tabindex="-1">Teste de SubMenu</a>
                        </li>
                    </ul>
                </li>
                <li role="menuitem" class="dynamic" style="">
                    <a class="level2 dynamic" href="Outsourcing.aspx" tabindex="-1">Outsourcing</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div style="clear: left;">
</div>
<a id="Menu2_SkipLink"></a>

And the Jquery:

 Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
            return false;
        };
        $(function () {
            //Remove the style attributes.
            $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');

            //Apply the Bootstrap class to the Submenu.
            $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");

            //Apply the Bootstrap properties to the Submenu.
            $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false");

            //Apply the Bootstrap "active" class to the selected Menu item.
            $("a.selected").closest("li").addClass("active dropdown-submenu");
            $("a.selected").closest(".dropdown-toggle").addClass("active dropdown-submenu");

        });

Upvotes: 0

Views: 2226

Answers (2)

Wesley Reuel Marques Silva
Wesley Reuel Marques Silva

Reputation: 93

Well, after some test with your code mHenderson, I finally got the answer!

 $(function () {
            $("ul.level3").parent("").addClass("dropdown-submenu");
        });

Thank you

Upvotes: 0

mHenderson
mHenderson

Reputation: 132

https://api.jquery.com/parent/

$( "li" ).parent( ".level3 dropdown-menu dynamic" ).addClass( "dropdown-submenu" );

is that right?

Upvotes: 1

Related Questions