Question

当按下一个相邻按钮时，如何显示Bootstrap下拉列表？

我尝试了以下各种组合：

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

为了澄清，我希望列表显示＆＃34;分支＆＃34;按下按钮，就像我点击正常的触发按钮一样。

Answer 1

如果您希望只有点击＆＃34;分支＆＃34;才能打开下拉菜单。按钮，做这样的事情

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

JSFIDDLE

如果您希望在完整块（任一按钮）上的任何位置单击下拉列表，请执行此操作

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

JSFIDDLE

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

更新 class="open"将在.btn-group上切换，当具有data-toggle="dropdown"属性的按钮发出下拉触发器时。只需将此属性添加到第一个按钮（分支），您就可以开始使用了。检查this fiddle。希望这会有所帮助。

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

1 个答案: