Triggering bootstrap navbar after page load using JavaScript/jQuery

Question

I'm using bootstrap 3.3.6 and jQuery 1.11.3. I keep struggling with triggering bootstrap's navbar using plain JavaScript/jQuery.

My application is giving me the following data structure. Unfortunately, I don't have the ability to change it. I can add neither classes nor ids nor anything else.

    <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>

What I have already done in order to add the bootstrap navbar:

Adding the class dropdown-menu to all ul tags. I used $("ul ul").addClass("dropdown-menu");to achieve that.
Adding the classes nav navbar-nav to the outermost ul tag. I used $("ul:first").addClass("nav navbar-nav"); to achieve that.
Adding a surrounding div with classes collapse navbar-collapse. This is not a problem as I'm able to edit the surrounding HTML.
Adding jQuery Smartmenus to get multilevel navbar working.

The classes are added nicely (the outcoming code looks good). This is the working jQuery code:

$("ul:first").addClass("nav navbar-nav");
$("ul ul").addClass("dropdown-menu");
$("ul:first").smartmenus({
    subIndicatorsText: '',
    subIndicatorsPos: 'append',
});
$(".sub-arrow").addClass("caret");

EDIT

The navbar is triggered. However, it is not equal to a navbar on which the same css classes are added manually (in HTML without JavaScript). It doesn't have the same functionality.

Example 1: A normal bootstrap navbar prevents the TopMenu items from being clicked on a mobile device. I.e. the 1st click on a mobile device on <a href="http://google.com">Stuff</a> opens the SubMenu. The 2nd click opens google. This doesn't seem to work when the classes are added using JavaScript.

Example 2: When I add the classes manually the submenus open to the bottom (dropdown). When the classes are added using jQuery the submenus open in right direction. The outcoming code looks the same.

Question: What am I missing here? How can I trigger the bootstrap navbar using plain JavaScript or jQuery without touching the HTML and without losing functionality?

I don't think it's completely proper. For example by adding a surrounding DIV with collapse class, it all will get hidden. Please recheck the proper structure in the bootstrap docs. — Zoltán Tamási
– Zoltán Tamási, Commented Jan 11, 2016 at 14:31
Your HTML is malformed. At the bottom of the HTML you provided you have an extra closing tag for a li element. This may be causing you problem. It is the third line up from the bottom in your example. — WebWanderer
– WebWanderer, Commented Jan 11, 2016 at 15:37
Actually, your HTML is malformed in a dirrerent way. Your second li element is closed before the ul that should be its child. This ul is then a child of another ul, which is invalid, and the extra </li> should be causing you an error. Remove the closing li tag (</li) from line 3 in your example. — WebWanderer
– WebWanderer, Commented Jan 11, 2016 at 15:53

WebWanderer · Accepted Answer · 2016-01-11 16:38:26Z

2

Unfortunately, I cannot find a way to create a "tree-control" using Bootstrap Collapse. Bootstrap Collapse is typically used to make "accordion" controls instead. A "tree-control" theoretically could be created with Bootstrap collapse using panel-groups and declaring data-parent, but this does not match the HTML you've provided that you say you cannot edit.

What I did find is this, which appears to be pretty promising for turning your un-editable ul-struct into a working tree-control. I tried making a script that could dynamically update your structure and make this work, but I didn't have much luck. I can't spend much time on it, but here is my work if you would like to poke aroud with it. I hope this helps.

Also, there are two major errors with what you have provided. One, on the third line of the HTML provided you have a closing tag for the li element there. There is a closing tag later in the HTML for the same element, I presume, and you must remove the closing tag on line 3 of your HTML so that your li can encapsulate the following ul. I hope this was a copy-paste error and that you can edit this part, because this error will break your project.

Also, the Bootstrap directives of collapse and dropdown-menu don't seem to work nice together. In all of my testing, if I have a working collapse on an element and I add the class dropdown-menu to it, it no longer listens to the data-toggle. I would suggest removing the dropdown-menu piece from your process, it appears to be unnecessary.

edited Jan 11, 2016 at 16:38

answered Jan 11, 2016 at 14:35

WebWanderer

11k5 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zoltán Tamási Over a year ago

I'm almost sure that it's semantically the same as $("ul ul")...

WebWanderer Over a year ago

@ZoltánTamási Of course it is semantically the same, yet it is working. If this doesn't work for you, then your problem stems from something in your project that you are not showing us. Did you include everything correctly?. Please review this working JSFiddle.

WebWanderer Over a year ago

I misunderstood. I thought you were having an issue adding the classes. My apologies. I will update my answer accordingly.

hurb Over a year ago

Thank you for your efforts and your detailed feedback. I appreciate your work. You were right, my html was malformed. I fixed it and added jQuery smartmenus to get the navbar working. However, there are still differences in the behaviour of the navbar when the classes are added via jQuery. I tried to explain that in my Edit. Anyway, thank you for your answer.

Collectives™ on Stack Overflow

Triggering bootstrap navbar after page load using JavaScript/jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related