Bootstrap Dropdown Navigation Toggle Not Working with native Joomla jQuery

Question

I'm trying to implement a Bootstrap menu with a toggle dropdown on a Joomla site.

Got most of it working except for the toggle isn't working...Looking at inspect tool when .dropdown element is clicked, the .open class is added very quickly, but then immediately disappears. Wondering if there's another script or something else that's causing issues.

I've added necessary classes and attributes via jQuery like so:

jQuery(".currenthas-child, .has-child").addClass("dropdown");
jQuery(".submenu").addClass("dropdown-menu");
jQuery(".menu").addClass("nav navbar-nav");

jQuery( ".dropdown > a:first-child" ).attr({
    'data-toggle': "dropdown",
    role: "button",
    'aria-haspopup': "true",
    'aria-expanded': "false"
});

jQuery(".dropdown > a:first-child").append('<span class="caret"></span>');
jQuery(".dropdown > a:first-child").addClass("dropdown-toggle");

Here's a link to live staging site

Any help is much appreciated.

Answer 1

Try this: Comment out the following line in your template index.php:

jdoc:include type="head"

If this workaround works for your toggle, there is a conflict between the native joomla-js-library and your bootstrap-js-library.

Answer 2

Bootstrap must be enabled in joomla by standard method in template, see j.docs. You can improve it by external bootstrap css and js.