Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Boostrap collapse在发布时无法正常工作(但在本地工作)_Javascript_Jquery_Bootstrap 4_Minify_Collapse - Fatal编程技术网

Javascript Boostrap collapse在发布时无法正常工作(但在本地工作)

Javascript Boostrap collapse在发布时无法正常工作(但在本地工作),javascript,jquery,bootstrap-4,minify,collapse,Javascript,Jquery,Bootstrap 4,Minify,Collapse,我的网站上有一个可折叠的导航栏。它自动关闭,没有理论上实现的平滑效果。这是一个用gulpfile构建的Jekyll网站,该文件连接、缩小并丑化HTML、css和Javascript: 除了可折叠导航栏外,其他一切都工作正常。可折叠的导航栏在本地加载到我的计算机中时实际上可以工作,但在发布时不能工作 我想问题可能是由HTML/css缩小过程引起的 这是它在DOM中的外观: <div class="bg-dark collapse" id="navbarHeader" style="">

我的网站上有一个可折叠的导航栏。它自动关闭,没有理论上实现的平滑效果。这是一个用gulpfile构建的Jekyll网站,该文件连接、缩小并丑化HTML、css和Javascript:
除了可折叠导航栏外,其他一切都工作正常。可折叠的导航栏在本地加载到我的计算机中时实际上可以工作,但在发布时不能工作

我想问题可能是由HTML/css缩小过程引起的

这是它在DOM中的外观:

<div class="bg-dark collapse" id="navbarHeader" style="">
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-md-7 py-4">
        <h4 class="text-white">Acerca de</h4>
        <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
      </div>
      <div class="col-sm-4 offset-md-1 py-4">
        <h4 class="text-white">Contacto</h4>
        <ul class="list-unstyled">
          <li><a href="#" class="text-white">Twitter</a></li>
          <li><a href="#" class="text-white">Facebook</a></li>
          <li><a href="#" class="text-white">Email</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

槭树

在下面添加一些有关专辑、作者或任何其他背景的信息。写几句话,这样人们就可以了解一些信息性的花边新闻。然后,将他们链接到一些社交网站或联系信息

联系人
请记住:相同的代码在本地工作,但在发布时不工作

Javascript文件与Bootstrap 4中的文件完全相同:

<script src="/js/jquery-slim.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>


需要帮忙吗

导航栏打开时的css样式似乎丢失了

我检查了你的索引文件,现在你拥有的是这个

.collapse {
    display: none;
}
替换为css文件中的这段代码

.collapse {
  display: none;
  &.show {
    display: block;
  }
}

这应该可以解决您的问题

我看到您已经链接了popper.min.js,有时popper无法与bootstrap 4正常工作。删除该链接,您需要下载并链接tether.min.js而不是popper js,我认为您的
#navbarHeader
放错了位置。它应该放在
.navbar
中才能正常工作


槭树

在下面添加一些有关专辑、作者或任何其他背景的信息。写几句话,这样人们就可以了解一些信息性的花边新闻。然后,将他们链接到一些社交网站或联系信息

联系人

您是否可以发布代码来重新处理问题,而不是链接到外部站点?谢谢。我正在编辑这篇文章。你能把答案作为一个单独的答案添加,并将其标记为已接受,而不是将其编辑到问题中吗?请解决它。该问题是在Gulp Uncss过程中引起的。我刚刚添加了这个异常以避免发布时出现错误:
pipe(uncss({html:['''u site/***.html'],忽略:['.fade','.collapse','.collapse.show','.collapsing']}))
感谢您的建议,但它无法修复它。谢谢!是的,您的评论帮助我注意到,uncss进程通过消除必要的css导致了这个问题。很高兴能提供帮助!