按下tab键时如何触发Bootstrap下拉菜单

Question

是否可以通过按 Tab 键打开 Bootstrap 下拉菜单？下面sn-p中的输入框只是举例。我想在页面加载后发生什么，输入框被赋予焦点。然后当我按 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>

Answer 1

不确定我是否正确理解了您的问题，这是您要搜索的内容吗？

因此，当您在 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>

Answer 2

将 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 classes 第一项以显示选项卡项。

<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>