使用外部控件显示下拉菜单

Show dropdown menu using external control

本文关键字：显示 下拉菜单 控件 外部      更新时间：2023-09-26

如何在相邻按钮按下时显示引导下拉列表?

我试过了所有的组合:

$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()

但是我不能让它工作。

我的html是:

<div class="btn-group">
                <button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
                <button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul id="branchFilter" class="dropdown-menu" role="menu">
                    <?PHP foreach ($branchList as $branchData) { ?>
                        <li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><a href="#"><?PHP echo $branchData->name;?></a></li>
                    <?PHP } ?>
                </ul>
            </div>

为了澄清，我希望列表显示"Branch"按钮是否被按下，就像我单击普通触发按钮一样。

如果您希望下拉菜单只在点击"Branch"按钮时打开，请执行如下操作

$('#activeBranchFilterBtn').on("click", function(){
                    $('ul.dropdown-menu').toggle();
                });

JSFIDDLE

如果您希望在单击完整块的任何位置(任何一个按钮)时获得下拉菜单，请执行

$('.btn-group').on("click", function(){
                    $('ul.dropdown-menu').toggle();
                });

JSFIDDLE

我想第二个才是你需要的。

UPDATE: class="open"将在您的.btn-group上切换，当从data-toggle="dropdown"属性的按钮给出下拉触发器时。只需将此属性添加到第一个按钮(分支)，就可以了。检查一下这把小提琴。

相关文章：