I'm in the middle of transitioning my application from Bootstrap 2.3.2 to 3.3.2. I've got that mostly working, but I'm having problems with the collapsed version of my navbar. When I am on a reduced-sized screen (either on my phone or by narrowing my desktop window), I see the collapsed-menu button, and if I click on that it opens the menu, but clicking on it again does not close the menu.
This is not the same question as this one, which was about clicking on one of the items in the collapsed menu. In my case, clicking on the header itself doesn't close the menu, which AFAIK it should.
My navbar is on the complex side, but not remarkably so. Eliding some of the bulk, it is:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".querki-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/assets/images/Logo-menubar.png"></a>
</div>
<div class="querki-navbar-collapse navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#.1v" id="">All Things</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Actions" href="#Actions" data-toggle="dropdown" role="button">Actions <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a id="" href="#">Refresh</a></li>
<li class="divider"></li>
<li><a id="" href="#">Design a Model</a></li>
...
<li class="disabled"><a>Delete All Things</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Admin" href="#Admin" data-toggle="dropdown" role="button">Admin <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/admin/manageUsers" id="">Manage Users</a></li>
...
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Logged in as Mark Waks" href="#Logged in as Mark Waks" data-toggle="dropdown" role="button">Logged in as Mark Waks <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/u/mark" id="">Your Profile</a></li>
<li><a href="/logout" id="">Log out</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="search-query form-control _withGadget" type="text" placeholder="Search">
</div>
</form>
<ul class="nav navbar-right">
<li>
<a href="#_notifications" class="_withGadget"><i class="icon-bell"></i></a>
</li>
</ul>
</div>
</div>
</div>
I have click handlers attached to many of the individual menu items, but not AFAIK to the headers themselves.
I'm using jQuery 2.1.3 (from webjars), and a brand-new Bootstrap, so 3.3.2. I asked for all of the JavaScript components from the Bootstrap download. I'm not seeing any errors on the console when I try to click the menu closed; it simply doesn't happen. Oddly, I'm having difficulty attaching a click handler to .navbar-toggle (which I tried in order to investigate) -- again, nothing happens when I try that, which makes me suspect that that's involved.
The sub-menus do work as expected: if I click on one of the submenu headers it opens, and clicking again closes it. So the issue doesn't appear to be drop-downs in general.
I do notice that when I click on the top menu icon it opens instantly, rather than sliding open the way it does on the Bootstrap site. (And the way it did in my previous 2.3.2 version.) Also, when it snaps open, the size seems to be fixed, which wasn't previously the case: I am getting a scrollbar for the opened menu, and trying to scroll that causes weird mal-effects.
Unfortunately, since even the non-minified Bootstrap.js file is a one-liner, it's extremely hard to debug. Anyone have any suggestions of how to pursue this?
ETA: Interesting. An additional datum: this problem is on my program-generated page. (This is a single-page-app, mostly.) When I apply essentially the same tags to my static login page, it all works just fine. So it seems like the issue has something to do with building the menu after page initialization. Do I need to kick something via JavaScript to get it to work properly?
