Bootstrap Drop-Down-Toggle schließen auf Klick

Question

Ich habe eine Dropdown-Taste mit einer Liste von Dingen, die an verschiedenen Teilen der Seite verankert sind. Dieses Dropdown ist nur für Mobilgeräte verfügbar.

Das Problem ist jedoch, das Dropdown würde nicht schließen, nachdem ich darauf geklickt habe. Kann ich es trotzdem auf Klick machen? Ich habe versucht, mich umzusehen, aber es würde bei mir nicht funktionieren.

<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> 

Ich habe auch einen Blick auf Bootstrap js selbst und fing diese Zeile:

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) 
    } 

Ist dies der Grund, warum es nicht geschlossen wird? Gibt es einen Workaround, damit es funktioniert?

EDIT:

Also mit etwas Hilfe bekam ich dieses Skript:

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

Mein Javascript ist ziemlich schwach, wie kann ich dies tatsächlich bearbeiten, um es nur in meinem „mobile-Drop-Down“ funktioniert id div.

Okay, so weit ich habe meinen Skript diese aktualisiert:

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

Es funktioniert wie, wie ich will es sein. Aber das Dropdown wird nach dem ersten Mal nicht wieder geöffnet.

Answer 1

Dies sollte es für Ihre HTML funktioniert:

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

aktualisieren

Hier ist ein funktionierendes Beispiel Ihre glatte Scroll-Funktionalität einschließlich:

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

Beachten Sie die dritte Zeile? Das ist alles, was es braucht: $(this).dropdown("toggle");.

Sie können eine working example auf JSFiddle auschecken.

Answer 2

Eine gute Lösung ist hier zu finden:

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

hinzufügen class="dropdown-toggle disabled"

Es ist besser, hier erklärt Allow click on twitter bootstrap dropdown toggle link?