Javascript Boostrap collapse在发布时无法正常工作(但在本地工作)
我的网站上有一个可折叠的导航栏。它自动关闭,没有理论上实现的平滑效果。这是一个用gulpfile构建的Jekyll网站,该文件连接、缩小并丑化HTML、css和Javascript: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="">
除了可折叠导航栏外,其他一切都工作正常。可折叠的导航栏在本地加载到我的计算机中时实际上可以工作,但在发布时不能工作 我想问题可能是由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导致了这个问题。很高兴能提供帮助!