Bootstrap dropdown-toggle close on click

Question

I have a dropdown button with a list of things that are anchored to different parts of the page. This dropdown is only for mobile.

However the problem is, the dropdown would not close after I click on it. Is there anyway I can make it close on click? I've tried looking around but it wouldn't 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 took a look at bootstrap's 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 be the reason why it won't close? Are there any 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, how do i actually edit this to make it work only in my "mobile-dropdown" id div.

Alright so far I've 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 like how I want it to be. But the dropdown won't open again after the first time.

see this post of evanp it may help you https://gist.github.com/evanp/6456479 — Suchit kumar, Apr 30 '15 at 08:56
Nice! Thanks it works! But it is affecting my navbar's dropdown. Is there a way I can direct the little script only for this dropdown button? — flolaloop, Apr 30 '15 at 09:01
I did try adding a new class name as changing the dropdown-toggle name would affect the dropdown. but the whole thing wouldnt work anymore — flolaloop, Apr 30 '15 at 09:23

Kevin · Accepted Answer · 2015-05-06T06:39:38.470

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 including your smooth scroll functionality:

$(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;
            }
        }
    });
});

Notice the third line? That's all it needs: $(this).dropdown("toggle");.

You can check out a working example on JSFiddle.

edited May 06 '15 at 06:39

answered Apr 30 '15 at 11:23

Kevin

1,213
10
13

i've just tried it on my code but it is not working. instead of having the dropdown closed on click, i can't click on the dropdown to open it again after i closed it. – flolaloop May 04 '15 at 01:05
@flolaloop The code you've got should work. It should've worked even without the JavaScript you've added. Take a look at [this](http://jsfiddle.net/wkquggy3/1/). Notice how I've turned off the JavaScript. I wonder if you've got some other JavaScript which is causing this. Is this all? – Kevin May 04 '15 at 07:27
okay found whats blocking it, and now it works. but now my smoothscroll script is not working. I feel like this is getting more complicated than it actually is :'( – flolaloop May 04 '15 at 08:56
@flolaloop So, what's blocking it? Can you add it to the jsfiddle page, update it and post the link? – Kevin May 04 '15 at 09:45
i think it is my script for the smoothscroll effect. heres the updated jsfiddle https://jsfiddle.net/wkquggy3/16/ – flolaloop May 06 '15 at 02:04

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

A good solution can be found here:

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

Add class="dropdown-toggle disabled"

It's better explained here Allow click on twitter bootstrap dropdown toggle link?

edited May 23 '17 at 12:02

Community

1
1

answered Aug 19 '15 at 22:19

Christian Stenger Palma

11
1

Bootstrap dropdown-toggle close on click

2 Answers2