jquery 发布时Boostrap折叠无法正常工作(但在本地工作)

xzv2uavs 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(133)

我的网站上有一个可折叠的导航栏。它会自动关闭，没有理论上实现的平滑效果。这是一个Bootstrap 4 Jekyll网站，用一个gulpfile构建，它将HTML、css和Javascript连接、缩小和丑化：http://reporteca.umh.es/
除了可折叠的导航栏外，所有的东西都工作得很完美。可折叠的导航栏实际上在我的电脑本地加载时可以工作，但发布时就不行了。
我猜这个问题可能是由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>

有什么需要帮忙的吗？

jquery

来源：https://stackoverflow.com/questions/48502678/boostrap-collapse-not-properly-working-when-published-but-it-works-locally

3条答案

按热度按时间

mrphzbgm1#

导航栏打开时的css样式似乎丢失了。
我检查了你的索引文件，目前你有这个

.collapse {
    display: none;
}

替换为css文件中的这段代码

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

这应该能解决你的问题

赞(0）回复(0）举报 2022-12-03

c90pui9n2#

我看到你已经链接了popper.min.js有时popper不能正常工作与引导程序4.删除该链接，你需要下载和链接tether.min.js，而不是popper js

赞(0）回复(0）举报 2022-12-03

eqoofvh93#

我想你把你的#navbarHeader放错了地方。它应该放在.navbar内才能正常工作。

<!-- Original place of `#navbarHeader` -->

<div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
        <a href="#" class="navbar-brand d-flex align-items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg><strong>Reporteca</strong></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="true" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    </div>

    <!-- New place of `#navbarHeader`, without `.show` -->
    <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>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 发布时Boostrap折叠无法正常工作(但在本地工作)

3条答案

相关问题

热门标签

最新问答