如何以编程方式打开引导下拉列表

最好的方法是检查下拉列表是否尚未打开，然后使用 .dropdown('toggle') 。

需要注意的几件事：

• 如果要通过单击另一个元素来触发它，则必须杀死另一个元素上的点击事件 - 否则引导程序将将其视为下拉列表外的单击，并立即将其关闭。
• $('.dropdown').addClass('open') 不是 $('.dropdown-toggle').dropdown('toggle')如其他建议答案，因为它会导致下拉列表永久保持打开状态而不是在单击组件时关闭。

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

小提琴示例

对于 Bootstrap 3，您只需将"open"类添加到下拉标签中即可。删除它会关闭下拉列表。

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

这可能适用于其他版本，但我不确定。

Bootstrap的下拉插件等待'click.bs.dropdown'事件显示菜单，所以在这种情况下：

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

应该工作。这不会触发同一元素上的其他"单击"事件（如果有）。

dropdown('toggle')使用按钮标签时对我来说非常有用。

.JS

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

.HTML

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

您需要阻止点击事件冒泡到父元素

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

您也可以使用return false;来执行相同的操作，但这也会阻止单击默认。

如果绝对没有一个在做这个技巧，那么你可以做如下的事情：

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

虽然上述方法可以工作，但我不建议使用它，因为它有点笨拙。

使用的东西，它有更多的用户期望的行为：

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

如果它已经打开，请不要执行任何操作。如果它已关闭，则它应该打开。

我有用。

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();
    $(this).parent().toggleClass('open');
});

标记：

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

只需在数据切换元素上使用.click()但不要忘记e.stopPropagation()

这简单的一句话花了我几个小时，希望它有帮助:)

如果您检查打开的下拉菜单，您可以看到选择器，该选择器更改下拉菜单的显示。在引导程序 v3.0.0 中，css 选择器是：

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

因此，应该将开放类添加到具有.dropdown菜单类的元素的父节点中。在其他版本中，如果它已被更改，则可能以相同的方式找到正确的选择器。

根据引导文档，您可以简单地使用它：

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

对于使用 Anuglar 6 的 Bootstrap 4，我使用了这个：

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

我的组件ts文件有这个功能

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

试试这个：

$('#sidebar_filter_areas').click();

在 Bootstrap 4.x 中，需要影响以下组件：

• li> .nav-item .dropdown
  • 一个> .nav-link> ARIA 扩展
• div> .下拉菜单

为这些类添加一个点击事件侦听器，该侦听器会触发切换类和布尔值，使下拉列表与纯 javascript 一起工作，如下所示：

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
}

你可以像这样使用 Native JavaScript 来实现同样的事情：

document.getElementById（'XYZ'）.click（'open'）;

它适用于所有浏览器。

大多数情况下充当手动操作：

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

HTML中添加data-toggle="dropdown" id="dropbox"，如下所示：

<div data-toggle="dropdown" id="dropbox" 

在 JS/TS 中：

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

如果你不想使用 jQuery ，那么Dropdown.toggle()的普通JS变体是：

# jQuery
$(elementThatTriggersDropdown).dropdown('toggle');
# js 
let dropdown = new Dropdown(elementThatTriggersDropdown);
dropdown.toggle();

不要忘记导入/使Dropdown类的引导程序可用。

https://github.com/twbs/bootstrap/blob/v5.2.0/js/src/dropdown.js

例如：

import Dropdown from "bootstrap/js/src/dropdown";

我使用 jQuery 的方式 无需添加或删除它在引导程序 4 中内置的类

$(function () {
        $('li.nav-item').hover(function () {
                $(this).children('.dropdown-menu').addClass('show')
            },
            function () {
                $(this).children('.dropdown-menu').removeClass("show");
            });
    });

如果你使用像AngularJS这样的JS框架，你只需要在JS（conditionMenuIsOpen()）中实现你的条件，并在HTML中display dropdown-menu的样式与这个条件绑定。当条件为 true 时，display样式将从hidden更改为block，并显示下拉菜单。

<ul class="dropdown-menu" ng-style="vm.conditionMenuIsOpen() && {'display':'block'}">
  ...
</ul>