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

时间:2014-04-03 15:56:20

标签: javascript twitter-bootstrap twitter-bootstrap-3

当我点击另一个下拉列表的项目时,我试图打开一个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>

18 个答案:

答案 0 :(得分:37)

最好的方法是检查下拉列表是否尚未打开,然后使用.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

答案 1 :(得分:23)

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

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

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

答案 2 :(得分:15)

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

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

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

答案 3 :(得分:7)

使用按钮标签时,

<?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')

答案 4 :(得分:4)

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

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

你也可以使用return false;做同样的事情,但这也会阻止点击失败。

答案 5 :(得分:3)

如果绝对没有人在做这个伎俩,那么你可以做如下的事情:

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

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

答案 6 :(得分:2)

这适合我。

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

答案 7 :(得分:2)

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

这一条简单的线条花了我几个小时,希望它有所帮助:)

答案 8 :(得分:1)

试试这个:$('#sidebar_filter_areas')。click();

答案 9 :(得分:1)

根据bootstrap docs,你可以简单地使用它:

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

答案 10 :(得分:0)

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

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

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

答案 11 :(得分:0)

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

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

答案 12 :(得分:0)

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

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

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

答案 13 :(得分:0)

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

答案 14 :(得分:0)

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

  }

答案 15 :(得分:0)

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

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

它适用于所有浏览器。

答案 16 :(得分:0)

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

答案 17 :(得分:-1)

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

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