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.