CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
hurb
hurb

Reputation: 2217

Triggering bootstrap navbar after page load using JavaScript/jQuery

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:

  1. Adding the class dropdown-menu to all ul tags. I used $("ul ul").addClass("dropdown-menu");to achieve that.

  2. Adding the classes nav navbar-nav to the outermost ul tag. I used $("ul:first").addClass("nav navbar-nav"); to achieve that.

  3. Adding a surrounding div with classes collapse navbar-collapse. This is not a problem as I'm able to edit the surrounding HTML.

  4. 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?

Upvotes: 0

Views: 1064

Answers (1)

WebWanderer
WebWanderer

Reputation: 10867

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.

Upvotes: 2

Related Questions