Bootstrap dropdown closes

Question

I have a drop-down button with a list of things that are tied to different parts of the page. This drop-down menu is for mobile devices only.

However, the problem is that the popup does not close after I click on it. Anyway, can I close it by pressing? I tried looking around, but that would not work on mine.

<div id="mobile-dropdown" class="nav2 w" data-spy="affix" data-offset-top="350"> <div class="container"> <div class="pull-left" style="margin-top:3px; margin-right:3px;">Jump to </div> <div class="pull-left"> <div class="btn-group mob-fl"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Categories <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#1">One</a></li> <li><a href="#2">Two</a></li> <li><a href="#3">Three</a></li> <li><a href="#4">Four</a></li> </ul> </div> </div> </div> </div> 

I also looked at bootstrap js itself and caught this line:

 if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { // if mobile we use a backdrop because click events don't delegate $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) } 

Is this the reason why it will not be closed? Is there a workaround to make it work?

EDIT:

So, with some help, I got this script:

 $('document').ready(function() { $("a.dropdown-toggle").click(function(ev) { $("a.dropdown-toggle").dropdown("toggle"); return false; }); $("ul.dropdown-menu a").click(function(ev) { $("a.dropdown-toggle").dropdown("toggle"); return false; }); }); 

My javascript is pretty weak, as I actually edited it so that it only works in my div with reversal output.

Until now, I have updated my script to this:

 $('document').ready(function() { $("#subject_cat_mob .dropdown-toggle").click(function(ev) { $("#subject_cat_mob .dropdown-toggle").dropdown("toggle"); return false; }); $("#subject_cat_mob ul.dropdown-menu a").click(function(ev) { $("#subject_cat_mob .dropdown-toggle").dropdown("toggle"); return false; }); }); 

It works the way I want. But the drop-down list will not open again after the first time.

Answer 1

This should make it work for your HTML:

 $('document').ready(function() { $("#mobile-dropdown .dropdown-toggle").click(function() { $(this).dropdown("toggle"); return false; }); }); 

Update

Here's a working example that includes your smooth scrolling features:

 $(function() { $('a[href*=#]:not([href=#])[href^="#"]:not([data-toggle])').click(function() { $(this).dropdown("toggle"); // this is the important part! if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top-100 }, 1000); return false; } } }); }); 

Pay attention to the third line? That's all he needs: $(this).dropdown("toggle"); .

You can check the working example on JSFiddle.

Answer 2

A good solution can be found here:

https://github.com/CWSpear/bootstrap-hover-dropdown

Add class="dropdown-toggle disabled"

Here is a better explanation. Allow clicking on the link for the twitter bootstrap dropdown list?