如何以编程方式打开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')。

要注意的事情：

• 如果您想通过点击其他元素来触发它，您必须 杀死其他元素上的click事件 - 否则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

Answer 2

对于Bootstrap 3，您只需添加＆＃39; open＆＃39; class到dropdown标签。删除它会关闭下拉列表。

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

使用按钮标签时，

<?php $fields = array( // author field 'author' => '', //email field 'email' => '', 'comment_notes_before' => '', 'comment_notes_after' => '' ); ?> <?php $comments_args = array( 'id_form' => 'commentform', 'class_form' => 'comment-form', 'id_submit' => 'submit', 'class_submit' => 'submit', 'name_submit' => 'submit', 'title_reply' => __( 'Leave a Reply' ), 'title_reply_to' => __( 'Leave a Reply to %s' ), 'cancel_reply_link' => __( 'Cancel Reply' ), 'label_submit' => __( 'Post Comment' ), 'format' => 'xhtml', 'comment_field' => '<p class="comment-form-comment"><label for="comment">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>', 'must_log_in' => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink() ) ) ) . '</p>', 'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>', 'fields' => apply_filters( 'comment_form_default_fields', $fields ), ); ?> 对我很有用。

JS

dropdown('toggle')

HTML

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

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

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

Answer 7

这适合我。

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

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

这一条简单的线条花了我几个小时，希望它有所帮助：）

Answer 9

试试这个：$（'＃sidebar_filter_areas'）。click（）;

Answer 10

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

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

Answer 11

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

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

因此应该使用.dropdown-menu类将open类添加到元素的父节点。在其他版本中，如果它已被更改，可能会以相同的方式找到正确的选择器。

Answer 12

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

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

Answer 13

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

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

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

Answer 14

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

• li＆gt; .nav-item .dropdown
  • a＆gt; .nav-link＆gt;咏叹调膨胀
• div＆gt; .dropdown菜单

为这些类添加一个触发切换类和bool值的click事件侦听器，使得下拉列表可以使用纯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

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

您可以使用Native JavaScript来实现相同的目的：

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

它适用于所有浏览器。

Answer 17

add below line to div tag

 data-toggle="dropdown" id="dropbox"
------------------------------------------------------
in HTML like this

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

in js/ts 

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

Answer 18

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

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