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.

  • 2
    You have 2 instances of jQuery being imported. One from Joomla's JUI folder and one from your template. You should disable the one from your template if possible. Multiple instances can cause conflicts – Lodder Mar 10 '16 at 12:39
  • Why use jQuery to add classes to your elements? Why not just add classes to your elements?? 10x this for your Landmark roles, these should be in your markup, not appended with jQuery; that's not accessible in the least. This is not how #a11y is done. – Seth Warburton Oct 6 '16 at 19:46

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.