Having trouble triggering Bootstrap's navbar with plain JavaScript/jQuery while using Bootstrap 3.3.6 and jQuery 1.11.3.
The data structure provided for my application cannot be modified in terms of adding classes or ids.
<ul>
<li><a href="http://google.de">Stuff</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">One more link</a></li>
</ul></li>
<li><a href="#">Mgmt Reports</a></li>
<li><a href="#">Notices</a></li>
<li><a href="#">Liens</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">A long sub menu</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><a href="#">Another link</a></li>
<li><a href="#">One more link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Steps Taken So Far:
Added the class
dropdown-menuto allultags. Done using$("ul ul").addClass("dropdown-menu");Added the classes
nav navbar-navto the outermostultag. Used$("ul:first").addClass("nav navbar-nav");Inserted a surrounding
divwith classescollapse navbar-collapse.Integrated jQuery Smartmenus for multilevel navigation bar functionality.
The jQuery code does successfully add the necessary classes and functions as required:
$("ul:first").addClass("nav navbar-nav");
$("ul ul").addClass("dropdown-menu");
$("ul:first").smartmenus({
subIndicatorsText: '',
subIndicatorsPos: 'append',
});
$(".sub-arrow").addClass("caret");
EDIT
The bootstrap navbar is activated, but its behavior differs from manually added CSS classes. The desired functionality seems to be lost when applied through JavaScript.
Example 1: On mobile devices, the normal Bootstrap navbar prevents clicking on TopMenu items. Clicking once opens the SubMenu, while the second click triggers the link. This behavior is not replicated when classes are added via JavaScript.
Example 2: Manually added classes display dropdown submenus, whereas jQuery-added classes show rightward submenu opening. Despite identical code output, functionality differs.
Question: What steps am I overlooking here? How can I effectively trigger the Bootstrap navbar using only JavaScript or jQuery without altering the HTML markup and preserving full functionality?