<p dir="auto">When you have a one page site, and the navbar is collapsed (e.g. on an iPhone),<br>
the 3-line collapse button is shown. Excellent.<br>
When you then click that button, the menu pops open. Good.</p>
<p dir="auto">If you then click one of the menu items, the 'jump' happens, but the menu does not collapse. Remember, it's a one page site, so the link refers to another location on the same page (#-link).<br>
The user now has to click the 3-line collapse button again to close the menu.</p>
<p dir="auto">Maybe it's easy to correct (by me), but if not, I hope you can fix it.</p>
<p dir="auto">For an example (still based on bootstrap 2.3, because it's a live site):<br>
<a href="Http://www.penumbragroup.com" rel="nofollow">Http://www.penumbragroup.com</a></p>
<p dir="auto">When writing a single-page application using Bootstrap's navbar, we quickly found out that we need a way to collapse the menu whenever any of the links are pressed.</p>
<p dir="auto">The naive solution seemed to be to attach the following to every link:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-responsive-collapse&quot;"><pre class="notranslate"><code class="notranslate">data-toggle="collapse" data-target=".navbar-responsive-collapse"
</code></pre></div>
<p dir="auto">However, while this works fine when the screen is narrow and the navbar needs to be collapsed, it causes some very strange side-effects when the screen is "tablet" or "desktop" sized. On some browsers (IE and Firefox), repeated clicks cause the contents of the navbar to disappear completely.</p>
<p dir="auto">While it should be possible to deal with this issue by writing custom JS in the App, I think it would be much better if the App generally doesn't need to deal with it at all.</p>
<p dir="auto">I've created a JsFiddle, <a href="http://jsfiddle.net/dlpatri/SjSfh/" rel="nofollow">showing the problem</a>.</p>
<p dir="auto">As an interim solution, I've added the following to Collapse's Data-Api on my local copy:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$(document).on('click.bs.collapse.data-api', '[data-hide=collapse]', function (e) {
  var $this   = $(this), href
  var target  = $this.attr('data-target')
      || e.preventDefault()
      || (href = $this.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  var $target = $(target)

  if ($target.hasClass('in')) {
    $target.collapse('hide');
  }
})"><pre class="notranslate"><code class="notranslate">$(document).on('click.bs.collapse.data-api', '[data-hide=collapse]', function (e) {
  var $this   = $(this), href
  var target  = $this.attr('data-target')
      || e.preventDefault()
      || (href = $this.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  var $target = $(target)

  if ($target.hasClass('in')) {
    $target.collapse('hide');
  }
})
</code></pre></div>
<p dir="auto">It's based on the <em>[data-toggle=collapse]</em> listener, but without support for accordion views. The key element is checking to see whether or not the navbar <em>can</em> be collapsed before collapsing it.</p>
<p dir="auto">I'm hoping that something like this could be added to the Bootstrap Collapse API, or if we could just get the normal toggle listener to include more checks before toggling.</p>
<p dir="auto">Thanks.</p>