it-swarm.com.de

So öffnen Sie das Bootstrap-Dropdownprogramm programmgesteuert

Ich versuche, ein Bootstrap-Dropdown-Menü zu öffnen, wenn ich auf ein anderes Dropdown-Element klicke.

Die Idee ist, eine Stadt aus der ersten Dropdown-Liste auszuwählen. Das Skript öffnet dann automatisch die zweite Dropdown-Liste mit Bereichen (und zeigt nur die der ausgewählten Stadt entsprechenden Bereiche an).

Hier ist meine JS: 

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').dropdown('toggle');
});

und das ist das HTML:

<div class="dropdown form-control">
   <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>           
   <input type="hidden" name="advanced_city" value="jersey-city">
   <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">
      <li role="presentation" data-value="">All Cities</li>
      <li role="presentation" data-value="jersey-city">Jersey City</li>
      <li role="presentation" data-value="london">London</li>
      <li role="presentation" data-value="new-york">New York</li>
   </ul>        
   </div>
</div>

<div class="dropdown form-control">
    <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>           
        <input type="hidden" name="advanced_area" value="">
           <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">
               <li role="presentation" data-value="">All Areas</li>
               <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>
               <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>
               <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>
               <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>

                  .....
           </ul>        
        </div>    
</div>
52
Crerem

Am besten prüfen Sie, ob die Dropdown-Liste noch nicht geöffnet ist, und verwenden Sie dann .dropdown('toggle')

Paar Dinge, die Sie beachten sollten:

  • Wenn Sie es durch Klicken auf ein anderes Element auslösen möchten, muss Sie Das Klickereignis für das andere Element beenden. Andernfalls behandelt Bootstrap Es als Klick außerhalb des Dropdown-Menüs und schließt es sofort.
  • $('.dropdown').addClass('open') ist kein guter Ersatz für $('.dropdown-toggle').dropdown('toggle'), wie in anderen Antworten vorgeschlagen, da das Dropdown-Menü dauerhaft geöffnet bleibt , anstatt beim Schließen der Komponente geschlossen zu werden.

HTML:

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
  </button>
  <div class="dropdown-menu">
  Stuff...
  </div>
</div>

JS:

$('.trigger_button').click(function(e){
  // Kill click event:
  e.stopPropagation();
  // Toggle dropdown if not already visible:
  if ($('.dropdown').find('.dropdown-menu').is(":hidden")){
    $('.dropdown-toggle').dropdown('toggle');
  }
});

Fiddle Beispiel

34
Yarin

Für Bootstrap 3 können Sie einfach die 'open' Klasse zum Dropdown-Tag hinzufügen. Durch das Entfernen wird die Dropdown-Liste geschlossen.

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

Das kann in anderen Versionen funktionieren, aber ich bin mir nicht sicher.

23
mkandefer

Das Dropdown-Plugin von Bootstrap wartet, bis das Ereignis 'click.bs.dropdown' angezeigt wird. In diesem Fall gilt Folgendes:

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

sollte arbeiten. Dies löst keine anderen "Klick" -Ereignisse auf demselben Element aus, falls vorhanden.

15
Eugene

dropdown('toggle') funktioniert am besten, wenn ich das Button-Tag verwende.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>
7
mendydo

Sie müssen verhindern, dass das Click-Ereignis zu übergeordneten Elementen sprudelt

$('#sidebar_filter_city li').click(function(e){   
    $('#sidebar_filter_areas').dropdown('toggle');
    e.stopPropagation();
});

Sie können auch return false; verwenden, was dasselbe tut, aber dies verhindert auch Defaults beim Klicken.

3
Adam Lynch

Wenn absolut keiner von ihnen den Trick ausführt, können Sie Folgendes tun:

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

Obwohl das oben genannte funktionieren wird, empfehle ich es nicht, da es ein bisschen hackig ist.

3
adamj

Versuchen Sie folgendes: $ ('# sidebar_filter_areas'). Click ();

1

Gemäß bootstrap docs können Sie einfach Folgendes verwenden:

$('.dropdown-toggle').dropdown();
1
MajiD

Das funktioniert für mich.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

Markup:

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
1
LTroya

verwenden Sie einfach .click() für das data-toggle-Element Vergessen Sie jedoch nicht e.stopPropagation().

diese eine einfache Zeile hat mich stundenlang gedauert, ich hoffe es hilft :)

1

in Bootstrap 4.x müssen folgende Komponenten ausgeführt werden:

  • li> .nav-item .dropdown
    • a> .nav-link> aria-erweitert
  • div>. Dropdown-Menü

Durch das Hinzufügen eines Klickereignis-Listeners, der das Umschalten zwischen einer Klasse und einem Bool-Wert auslöst, wird die Dropdown-Funktion für diese Klassen wie folgt verwendet:

let status = false
const nav = document.getElementsByClassName('nav-item dropdown')[0]
nav.addEventListener('click', toggleDropdown)
function toggleDropdown () {
   if (status) {
      nav.classList.add('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.add('show')
   } else {
      nav.classList.remove('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.remove('show')
   }
   return status = !status
}
0
CagCak

Etwas, das ich gerne benutze, hat ein etwas mehr vom Benutzer erwartetes Verhalten: 

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

Wenn es bereits geöffnet ist, tun Sie nichts. Wenn es geschlossen ist, sollte es sich öffnen. 

0
Reed

Wenn Sie das geöffnete Dropdown-Menü inspizieren, können Sie einen Selector sehen, der die Anzeige des Dropdown-Menüs ändert .

.open > .dropdown-menu {
    display: block;
}

Daher sollte die offene Klasse zum übergeordneten Knoten des Elements mit der Dropdown-Menüklasse hinzugefügt werden. Wenn er in anderen Versionen geändert wurde, kann der korrekte Selektor auf dieselbe Weise gefunden werden.

0

die meiste Zeit fungiert als manuelle Aktion:

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').click();
});
0
nopenope

Sie können dasselbe mit Native JavaScript wie folgt erreichen:

  document.getElementById ('XYZ'). click ('open');

Es funktioniert auf allen Browsern.

0
Vivek Mehta

Für Bootstrap 4 mit Angular 6 habe ich Folgendes verwendet: 

<div class="dropdown-menu" id='logoutDropDownMenu' x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">

Meine Komponentendatei hat diese Funktion

 import { DOCUMENT } from '@angular/common';
 import { Inject } from '@angular/core';

export class HomeComponent implements OnInit {

  private toggleLogout: boolean;

  constructor(@Inject(DOCUMENT) private document: any){}


 toggleButton() {
    if (this.toggleLogout) {
      this.document.getElementById('logoutDropDownMenu').classList.add('show');
    } else {
      this.document.getElementById('logoutDropDownMenu').classList.remove('show');
    }
    this.toggleLogout = !this.toggleLogout;

  }
0
Levijatanu