Bootstrap collapsed header flickers on first click - html

Question

I'm having some strange issues with a bootstrap navbar. When the window is small enough, the expand button shows up as expected. However, once the button is clicked it behaves really strangely. The first click flickers the contents of the drop down, then dissapears. On the second click, the dropdown shows up normally but with no animation.
The code (as rendered by the server)
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Businesses</li>
<li>About Us</li>
<li>Contact</li>
<li>Advertise</li>
</ul>
<ul class="nav pull-right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</div>
</div>
Any thoughts?
EDIT: There will normally be an image in the brand anchor

Answer 1

I had this same issue and found that I had this small script block in my page which I must have copied from somewhere.
<script type="text/javascript">
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
</script>
Removing this fixed the issue.
I'm not sure where it came from, I assume some example from Bootstrap 2.x or something.