当我点击另一个下拉列表的项目时,我试图打开一个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>
答案 0 :(得分:37)
最好的方法是检查下拉列表是否尚未打开,然后使用.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');
}
});
答案 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 ),
);
?>
对我很有用。
dropdown('toggle')
$("#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中,需要实现以下组件:
为这些类添加一个触发切换类和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()
) 中实现你的条件,并在这个条件中绑定 display
的 dropdown-menu
样式HTML。当条件为真时,display
样式将从 hidden
更改为 block
,并且会出现下拉菜单。
<ul class="dropdown-menu" ng-style="vm.conditionMenuIsOpen() && {'display':'block'}">
...
</ul>