Css Bootstrap 3可折叠菜单未设置滑入/滑出动画

我试图在页面顶部固定一个导航栏，以便在它出现和重新出现时设置动画（滑入/滑出）。我还希望它在移动设备上观看时崩溃

我只是从引导开始，大部分代码来自教程，包括屏幕显示下拉菜单时出现的按钮

当我调用collapse（‘toggle’）时，没有任何动画，尽管文档似乎建议应该有一个动画（谈论它开始隐藏和被隐藏之间的时间）

我使用的是平面用户界面，尽管删除它并不能解决问题。我还试着移除按钮中除navbar品牌链接之外的所有内容；它仍然没有动画。我试着看看panel collapse或navbar collapse类是否会使其具有动画效果，但也没有成功

有没有快速解决这个问题的方法？我应该手动编写这个动画吗

下面是我正在使用的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>

$（文档）.ready（函数（）{
$（文档）。单击（函数（）{
$（“#lyla nav”）.collapse（‘切换’）
});
});

---

提前谢谢你

您的意思是在导航条div中有

折叠导航折叠
？这使得导航栏无法显示，可能会混淆数据目标。你不应该在这里需要你自己的脚本。请参见我从导航栏div中移动了折叠和导航折叠的示例。我试图使导航栏最初不显示，然后在单击鼠标时滑入滑出（最终我将有一个不同的事件触发器）。类似于导航栏的东西。我不能100%确定数据目标是如何工作的，所以这可能是问题的一部分。