如何以编程方式打开 Bootstrap 下拉菜单

Question

当我单击另一个下拉列表中的项目时，我尝试打开 Bootstrap 下拉列表。

想法是从第一个下拉列表中选择一个城市 - 然后脚本将自动打开第二个包含区域的下拉列表（并仅显示与所选城市相对应的区域）。

这是我的JS：

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

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

Answer 1

最好的方法是检查下拉列表是否尚未打开，然后使用

.dropdown('toggle')

。

需要注意的几件事：

如果你想通过点击另一个元素来触发它，你必须杀死另一个元素上的点击事件-否则 Bootstrap 会将其视为下拉列表外部的单击并立即将其关闭。
```
$('.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');
  }
});

小提琴示例

Answer 2

对于 Bootstrap 3，您只需将“open”类添加到下拉标签即可。删除它会关闭下拉菜单。

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

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

Answer 3

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

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

应该可以。这不会触发同一元素上的其他“点击”事件（如果有）。

Answer 4

dropdown('toggle')

在使用按钮标签时对我来说非常有用。

JS

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

HTML

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

Answer 5

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

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

您还可以使用

return false;

来完成相同的操作，但这也会阻止点击时出现默认情况。

Answer 6

如果他们都没有做到这一点，那么你可以执行如下操作：

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

虽然上面的方法可行，但我不建议使用它，因为它有点 hacky。

Answer 7

我喜欢使用的东西有更多的用户预期行为：

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

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

Answer 8

这对我有用。

$('.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>

Answer 9

只需在数据切换元素上使用

.click()

但不要忘记

e.stopPropagation()

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

Answer 10

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

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

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

Answer 11

根据bootstrap docs，你可以简单地使用这个：

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

Answer 12

对于使用 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;

  }

Answer 13

试试这个：

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

Answer 14

在 Bootstrap 4.x 中，需要实现以下组件：

li > .nav-item .dropdown
- a > .nav-link > aria-expanded
div > .dropdown-menu

添加一个点击事件侦听器，该事件侦听器会触发类和布尔值的切换，对于这些类，下拉列表可以使用纯 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
}

Answer 15

您可以使用本机 JavaScript 实现相同的效果，如下所示：

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

它适用于所有浏览器。

Answer 16

大多数时候充当手动操作的作用：

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

Answer 17

在 HTML 中添加

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

，如下所示：

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

在 JS/TS 中：

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

Answer 18

如果您不想使用

jQuery

，那么

JS

的普通

Dropdown.toggle()

变体是：

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

Answer 19

这就是我使用 jQuery 的方式，无需添加或删除它在 Bootstrap 4 中内置的类

$(function () {
        $('li.nav-item').hover(function () {
                $(this).children('.dropdown-menu').addClass('show')

            },
            function () {
                $(this).children('.dropdown-menu').removeClass("show");
            });
    });

Answer 20

Bootstrap 5.3 更新...

根据文档，您可以创建一个 bootstrap.Dropdown 对象。它有toggle()、show()和hide()方法。

首先你需要找到切换元素，即 class="dropdown-menu" 的 HTML 元素，例如

let tce = new bootstrap.Dropdown(document.getElementById('navbarFileMenu'))

然后你可以打电话

tce.toggle()

等

Answer 21

如果您使用像

AngularJS

这样的JS框架，您只需要在JS中实现您的条件（

conditionMenuIsOpen()

）并在HTML中将

display

的

dropdown-menu

样式与此条件绑定即可。当条件为 true 时，

display

样式将从

hidden

更改为

block

，并且会出现下拉菜单。

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

如何以编程方式打开 Bootstrap 下拉菜单

问题描述投票：0回答：21

21个回答

JS

HTML

最新问题

如何以编程方式打开 Bootstrap 下拉菜单

问题描述 投票：0回答：21

21个回答

JS

HTML

最新问题

问题描述投票：0回答：21