Question

如何在不使用jQuery创建的移动版式中添加动画以降低Bootstrap 4？我尝试使用过渡高度1s和“全部”而没有结果。

感谢帮助。

document.getElementById('navbar-toggler').onclick = function () {
  document.getElementById('navbarSupportedContent').classList.toggle('show')
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 1

如果没有jQuery，就不能使用引导程序库，因为该库依赖于jQuery（也依赖popper）。 Introduction to Bootstrap 4：

我们的许多组件都需要使用JavaScript才能起作用。具体来说，它们需要jQuery，Popper.js和我们自己的JavaScript 插件。在页面末尾放置以下，在结束标记之前，启用它们。 jQuery必须来首先是Popper.js，然后是我们的JavaScript插件。

在没有jquery的情况下向移动设备中的bootstrap 4导航栏添加动画

1 个答案: