Question

This is the problem I had initially.
Bootstrap Responsive Navbar Problem

Then I got the solution which “wandarkaf” posted. It worked fine and solved my problem.

Now my problem is, I have a dynamic dropdown file upload system for my site. It works perfectly on localhost but not on webserver. I realized, the dropdowns in the second and third level do not appear because of the dropdown script I added to overcome the mobile navigational dropdown issue. Removing that solves the current problem but gives rise to the previous problem. And solving the previous problem gives rise to the current problem.

How do I solve both of them and make things work.

Here is the link for my file upload: Dynamic Dropdown File Upload

It’s supposed to work like this: Example
Choose the Computer Science Engineering Option! The others have been disabled by me.

Please help me overcome both the problems. Thank you.

Answer 1

}(window.jQuery);

$(function () {
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
       .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
       .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
});

Should be,

$(function () {
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
       .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
       .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
});

}( window.jQuery );