Question

我从项目中隔离了一个有故障的组件。

我正在尝试使用下拉选择器为输入搜索元素启用选项卡选择

我正在使用托管的jquery / bootstrap库

问题：当我从输入元素切换到下拉组件并按下向下键时，下拉显示，但我无法使用向上或向下箭头浏览下拉元素。

预期：我应该可以使用箭头键导航列表中的项目。文档中的示例是键盘可选，并显示相应的焦点状态。

文档：http://getbootstrap.com/components/#input-groups

示例HTML

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div><!-- /btn-group -->
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

小提琴：http://jsfiddle.net/YXNMB/

Answer 1

您需要在下拉列表中添加role =“menu”，如下所示：

<ul class="dropdown-menu pull-right" role="menu">

如果没有role =“menu”，则下拉组件不会将箭头键与下拉元素相关联。

下拉切换不响应键命令

1 个答案: