Question

我试图将导航栏固定在页面顶部，以便在它出现时再次显示动画（滑入/滑出）。我也希望在移动设备上观看时崩溃。

我刚开始使用bootstrap，大部分代码来自教程，包括屏幕上显示下拉按钮时显示的按钮。

当我调用折叠（＆＃39;切换＆＃39;）时，没有任何动画，即使文档似乎暗示应该有动画（http://getbootstrap.com/javascript/#collapse谈论时间在它开始隐藏和隐藏之间）

我使用平板ui，虽然移除它并没有解决问题。除了导航栏品牌链接之外，我还尝试删除按钮中的所有内容;它仍然没有动画。我试过看看面板折叠或导航栏折叠类是否会使它变得有生命，也没有用。

是否可以快速解决此问题？我应该手动编码这个动画吗？

这是我使用的html / js代码：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

   $(document).click(function() {
     $("#lyla-nav").collapse('toggle')
   });
  });

</script>
<div id="lyla-nav" class="navbar navbar-default navbar-fixed-top collapse nav-collapse">
  <div class="container">
    <button data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
      <!--literally is making each line inside of the button--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
    </button><a href="#" class="navbar-brand">Welcome</a>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
</div>

提前谢谢！

Bootstrap 3可折叠菜单不是动画幻灯片放入/缩小

0 个答案: