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

Posted 2023-02-22

【中文标题】如何以编程方式打开 Bootstrap 下拉菜单

【英文标题】：How to open Bootstrap dropdown programmatically

【发布时间】：2014-05-15 14:13:33

【问题描述】：

当我单击另一个下拉列表中的项目时，我正在尝试打开 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-***lyn" data-parentcity="">Northern ***lyn</li>

                  .....
           </ul>        
        </div>    
</div>

【参考方案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');
  
);

Fiddle example

【讨论】：

这是 Twitter Bootstrap 4.0.0-beta.3 中唯一适合我的答案

我怎么没想到？！ (如果你想通过点击另一个元素来触发它，你必须杀死另一个元素上的点击事件——否则 Bootstrap 会将它视为下拉菜单之外的点击并立即关闭它 )

您还应该切换 aria-expanded 属性。

关于“当您单击组件时，它将导致下拉菜单保持永久打开而不是关闭。”。不，它没有。只要我点击任何其他元素，它就会关闭下拉菜单。

【参考方案2】：

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

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

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

【讨论】：

这在 Bootstrap 4 中有效。我很困惑，直到我意识到你必须将它添加到“下拉菜单”。在原生 JS 中： document.getElementsByClassName('.dropdown-menu')[0].classList.add('show')

【参考方案3】：

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

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

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

【讨论】：

为我工作；请务必在带有data-toggle="dropdown" 的元素上调用trigger。与addClass('open') 不同，当您点击离开时，这也会关闭下拉菜单。

我使用的是 Bootstrap 3.3.6，它是 'click.bs.dropdown.data-api'

超级好用

还为我解决其他工具提示问题节省了更多时间。不同事件的相同逻辑

【参考方案4】：

dropdown('toggle') 在使用按钮标签时非常适合我。

JS

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

HTML

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

【讨论】：

但我确实有一个问题。我收到一个错误：未捕获的 TypeError：“#button”.dropdown 不是函数：在 javascript 控制台中。这正常吗？

打开和切换是不同的东西。如果它已经打开，切换可能会关闭下拉菜单

【参考方案5】：

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

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

您也可以使用return false;，它会做同样的事情，但这也会阻止点击时的默认值。

【参考方案6】：

如果绝对没有人能做到这一点，那么您可以执行以下操作：

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

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

【参考方案7】：

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

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

如果它已经打开，不要做任何事情。如果它是关闭的，那么它应该打开。

【参考方案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') " >
    </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>

【参考方案9】：

只需在 data-toggle 元素上使用 .click() 但不要忘记e.stopPropagation()

这一条简单的线路花了我几个小时，希望对您有所帮助:)

【参考方案10】：

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

.open > .dropdown-menu 
    display: block;

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

【参考方案11】：

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

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

【参考方案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;

  

【参考方案13】：

试试这个：

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

【参考方案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

【参考方案15】：

您可以像这样使用原生 JavaScript 实现相同的目标：

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

它适用于所有浏览器。

【参考方案16】：

大部分时间都是手动操作：

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

【参考方案17】：

像这样在 HTML 中添加data-toggle="dropdown" id="dropbox"：

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

在 JS/TS 中：

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

【参考方案18】：

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

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