Question

我创建了一个包含Bootstrap药丸的设置和一个标签窗格的标签列表，这些标签单击时显示相应的内容。到目前为止看起来还不错。

但是当我还添加了捕鼠器以使用热键（>）在药丸之间循环时，我注意到导航丸似乎不适用于快速更改：有时不会隐藏以前的选项卡窗格，因此将会显示多个内容。

通过快速单击也可以实现相同的不良效果，这就是我所知道的不是捕鼠器问题。（它仅有助于说明问题）

请考虑以下代码段：

Mousetrap.bind('>', () => {
  let
  $pills = $('#pills-tab .nav-item'),
      $pill = $pills.has('.active')
  ;
  if ($pill.length) {
    // NEXT, not PREV.
    $pill =
      // if is_edge.
      $pill.index() === $pills.length -1
      ?	$pills.eq(0)
    :	$pill.next()
    ;

    $pill = $pill.find('.nav-link');
    $pill.tab('show');
  }	
})

.instructions {
  margin-top: 30px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="root">
  <div class="controller">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="alpha-tab" href="#alpha" data-toggle="pill" role="tab" aria-controls="alpha" aria-selected="true">alpha</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="bravo-tab" href="#bravo" data-toggle="pill" role="tab" aria-controls="bravo" aria-selected="false">bravo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="charlie-tab" href="#charlie" data-toggle="pill" role="tab" aria-controls="charlie" aria-selected="false">charlie</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="delta-tab" href="#delta" data-toggle="pill" role="tab" aria-controls="delta" aria-selected="false">delta</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="epsilon-tab" href="#epsilon" data-toggle="pill" role="tab" aria-controls="epsilon" aria-selected="false">epsilon</a>
      </li>
    </ul>  
  </div>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="alpha" role="tabpanel" aria-labelled-by="alpha-tab">Alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha alpha.</div>
    <div class="tab-pane fade" id="bravo" role="tabpanel" aria-labelled-by="bravo-tab">Bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo bravo.</div>
    <div class="tab-pane fade" id="charlie" role="tabpanel" aria-labelled-by="charlie-tab">Charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie charlie.</div>
    <div class="tab-pane fade" id="delta" role="tabpanel" aria-labelled-by="delta-tab">Delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta delta.</div>
    <div class="tab-pane fade" id="epsilon" role="tabpanel" aria-labelled-by="epsilon-tab">Epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon epsilon.</div>
  </div>
  
  <p class="instructions">Compare pressing and holding "&gt;" (greater-than).</p>
</div>

将hidden.bs.tab上的其他标签隐藏为suggested in the documentation并没有真正改变任何不良行为。

[…]
$pill.tab('show');

$pill.on('hidden.bs.tab', (ev) => {
    window.setTimeout(() => {
    //  (1) this doesn't work.
    //  $(ev.target).removeClass('active');

    //  (2) neither does this.
    //  $('.tab-pane').not($(ev.target).attr('href')).removeClass('active');
    //  $($(ev.relatedTarget).attr('href')).addClass('active');

    }, 1);
});

或者也许我做错了。你们有什么主意吗？找不到以前问过的问题。

Bootstrap的导航丸无法应对快速变化

0 个答案: