Question

I am currently using 2.x Bootstrap version for my single-page application.

On the desktop, it works fine.

However on my ipad and mobile phones, it shows a nav button which is good. However, when I click an item in the dropdown item shown, it does not close automatically.

Since, it’s a single page app, I find it annoying to click it again to hide to look at the contents.

I tried collapse(‘hide’) when li is clicked on nav-collapse elements but it hides other li elements in the dropdown menus.

$(‘.nav-collapse > li’).click(function(e)
$(this).collapse(‘hide’)

What’s the best way to hide when a link is clicked?

Thanks.

Answer 1

There is a bug in Twitter Bootstrap’s Dropdown plugin (see Issue #4497) which was introduced in 2.1.0 and inadvertently blocks the click events on dropdown menu items. It should be fixed in 2.1.1.

If you are using a CDN or simply don’t want to edit/recompile the bootstrap-dropdown.js, you can just add the following workaround to your page, loading it after bootstrap:

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })

If you are hosting your own code, and are comfortable building the bootstrap.min.js, then you can make the following edit to bootstrap-dropdown.js on line 145:

'.dropdown'

should be changed to

'.dropdown form'