问题描述
是否可以通过按Tab键打开Bootstrap下拉菜单?以下摘要中的输入框仅作为示例。页面加载后我想发生的事情,输入框被赋予了焦点。然后,当我按Tab时,将出现一个下拉列表。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
解决方法
不确定我是否正确理解了您的问题,这是您要搜索的吗?
因此,当您进入input field
并按TAB按钮时,下拉菜单将打开。
$('#exampleInputEmail1').focus();
$('input[name=input]').on('keydown',function(evt) {
if (evt.key === 'Tab') {
evt.preventDefault();
if ($('.dropdown').find('.dropdown-menu').is(":hidden")) {
$('.dropdown-toggle').dropdown('toggle');
}
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="input" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div id="menu" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
,
将div nav nav-tabs
添加到下拉项的父项,同时将属性data-toggle="tab"
添加到每个下拉项。然后激活类以激活选项卡项。
然后,
<div class="tab-content">
<div id="email" class="tab-pane fade in active show">
// id given as first dropdown item.
--------- first tab content here-------------------
</div>
<div id="email" class="tab-pane fade in">
// id given as second dropdown item.
--------- second tab content here-------------------
</div>
and so on,</div>
请记住,在第一项中添加active show
类以显示选项卡项。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="tab-content">
<div id="email" class="tab-pane fade in active show">
<div class="form-group p-2">
<label for="exampleInputEmail1">Email address :</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Please enter email address">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
<div id="phone" class="tab-pane fade in">
<div class="form-group p-2">
<label for="exampleInputEmail1">Phone number :</label>
<input type="text" class="form-control" id="exampleInputPhone" aria-describedby="PhoneHelp" placeholder="Please enter phone number..">
<small id="PhoneHelp" class="form-text text-muted">We'll never share your phone number with anyone else.</small>
</div>
</div>
<div id="name" class="tab-pane fade in">
<div class="form-group p-2">
<label for="exampleInputEmail1">Name :</label>
<input type="text" class="form-control" id="exampleInputName" aria-describedby="NameHelp" placeholder="Please enter full name..">
<small id="NameHelp" class="form-text text-muted">We'll never share your name with anyone else.</small>
</div>
</div>
</div>
<div class="dropdown show p-2">
<a class="btn btn-success dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Here
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="nav nav-tabs">
<a class="dropdown-item active" href="#email" data-toggle="tab">Email</a>
<a class="dropdown-item" href="#phone" data-toggle="tab">Phone</a>
<a class="dropdown-item" href="#name" data-toggle="tab">Name</a>
</div>
</div>
</div>