运行 js 脚本时，Bootstrap 4 carousel 停止工作

Posted 2023-05-08

技术标签:

【中文标题】运行 js 脚本时，Bootstrap 4 carousel 停止工作【英文标题】：Bootstrap 4 carousel stopped working when running a js script 【发布时间】：2021-01-12 03:21:59 【问题描述】：

我正在使用带有 CDN 的 bootstrap 4。

问题是我有一个 boostrap4 轮播（取自他们的官方网站）并且效果很好，但是当我运行 js 代码时，轮播图像消失了。

这是轮播代码，效果很好

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU" class="d-block w-100" >
    </div>
    <div class="carousel-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU" class="d-block w-100" >
    </div>
    <div class="carousel-item">
      <img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart" class="d-block w-100" >
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>






<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

但是当我点击另一个 div 中的按钮时，轮播图像会消失，只有箭头留在两侧

这是其他代码的作用：

var jsaccordion = 
  init: function(target) 
    var headers = $("." + target + " .accordion-btn");
    if (headers.length) 
      headers.on('click', jsaccordion.select);
    
  ,

  select: function() 
    var tar = $(this).closest('.accordion-container');
    $('#shared-container').remove();
    if (tar.hasClass('active')) 
      tar.removeClass('active')
     else 
      $('.active').removeClass('active')
      tar.addClass('active');
      var targText = tar.find('.accordion-text').html();
      var sharedCont = "<div id='shared-container'>" + targText + "</div>";
      if($('body').width() > 768)
        tar = tar.parent();
      
      tar.after(sharedCont);
    
  


window.addEventListener('load', function() 
  jsaccordion.init("accordion-container");
);

body 
  max-width: 90%;
  margin: 0 auto;


.accordion-container 
  position: relative;


.accordion-container button::before 
  content: '+' !important;


.accordion-container.active button::before 
  content: '-' !important;


.accordion-container.active::after 
  content: '';
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid orange;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: orange;
  z-index: 100;
  font-size: 3rem;
  line-height: 1;


.accordion-container .accordion-text 
  display: none;
  color: #808080;
  padding: 15px;
  border: 1px solid #ffcc4b;


#shared-container 
  margin-top: 2rem;
  display: block;
  width: 100%;
  padding: 2rem;
  border: 1px solid orange;
  text-align: center;


#shared-container p 
  margin: 0;


@media (max-width : 768px)
  .col-6
    max-width: 100%;
    min-width: 100%;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <h1>Testing testing testing</h1>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

  <div class='row'>
    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class=" text-center">First one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
        <div class="accordion-text">
          <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
            convallis tellus id interdum velit laoreet. </p>
        </div>
      </div>
    </div>

    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class='text-center'>second one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>

        <div class="accordion-text">
          <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
        </div>
      </div>
    </div>
  </div>

我尝试在同一个文件和另一个文件中使用 js 代码，但同样的事情一直在发生

【问题讨论】：

【参考方案1】：

问题是我有一个 boostrap4 轮播（取自他们的官方网站）并且效果很好，但是当我运行 js 代码时轮播图像消失。

首先，您需要包含 boostrap 库，而不仅仅是 css。

用以下方式实例化轮播：

$('.carousel').carousel();

最后，如果你需要在手风琴之间切换激活这一行：

$('.active').removeClass('active')

需要更改：

tar.siblings().removeClass('active');  // toogle active state....

sn-p：

$(function () 

    $('.carousel').carousel();

    var jsaccordion = 
        init: function (target) 
            var headers = $("." + target + " .accordion-btn");
            if (headers.length) 
                headers.on('click', jsaccordion.select);
            
        ,

        select: function () 
            var tar = $(this).closest('.accordion-container');
            $('#shared-container').remove();
            if (tar.hasClass('active')) 
                tar.removeClass('active')
             else 
                tar.siblings().removeClass('active');
                tar.addClass('active');
                var targText = tar.find('.accordion-text').html();
                var sharedCont = "<div id='shared-container'>" + targText + "</div>";
                if ($('body').width() > 768) 
                    tar = tar.parent();
                
                tar.after(sharedCont);
            
        
    

    jsaccordion.init("accordion-container");
);

body 
    max-width: 90%;
    margin: 0 auto;


.accordion-container 
    position: relative;


.accordion-container button::before 
    content: '+' !important;


.accordion-container.active button::before 
    content: '-' !important;


.accordion-container.active::after 
    content: '';
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid orange;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: orange;
    z-index: 100;
    font-size: 3rem;
    line-height: 1;


.accordion-container .accordion-text 
    display: none;
    color: #808080;
    padding: 15px;
    border: 1px solid #ffcc4b;


#shared-container 
    margin-top: 2rem;
    display: block;
    width: 100%;
    padding: 2rem;
    border: 1px solid orange;
    text-align: center;


#shared-container p 
    margin: 0;


@media (max-width: 768px) 
    .col-6 
        max-width: 100%;
        min-width: 100%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class='col-7 mx-auto'>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU"
                     class="d-block w-100" >
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU"
                     class="d-block w-100" >
            </div>
            <div class="carousel-item">
                <img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart"
                     class="d-block w-100" >
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<div class='row'>
    <div class='col-6 accordion-container'>
        <div class="my-3">
            <h3 class=" text-center">First one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
            <div class="accordion-text">
                <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas
                    pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis
                    natoque penatibus et magnis. Duis convallis
                    convallis tellus id interdum velit laoreet. </p>
            </div>
        </div>
    </div>
    <div class='col-6 accordion-container'>
        <div class="my-3">
            <h3 class='text-center'>second one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
            <div class="accordion-text">
                <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet.
                    Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium
                    lectus quam id leo.</p>
            </div>
        </div>
    </div>
</div>

【讨论】：

感谢您的帮助，但我无法删除 '.active'.remove ... 因为那样下拉 div 部分无法正常工作，您可以在测试帖子时看到它；如果我从一个打开的 div 传递到另一个上面的失败 @Dfor 答案已更新。现在工具可以工作了。让我知道。谢谢效果很好，非常感谢您并回答了我提出的问题。仅当我添加例如另外两个下拉 div 时，在另一个“行”中会发生与以前相同的情况......这是我的错，因为我没有在问题中提到它，但你知道我该如何解决这个问题吗？跨度> 请更新您的问题，添加相关的 html。

以上是关于运行 js 脚本时，Bootstrap 4 carousel 停止工作的主要内容，如果未能解决你的问题，请参考以下文章

sails.js在mysql中运行多个命令查询

Bootstrap 4轮播不适用于AngularJS UI-Bootstrap

在 React JS 中使用淡入淡出时，Bootstrap 4.0.0-beta.3 模态不可见

使用 Bootstrap javascript 文件时播放 1.2.4 中的特殊行为

使用css或js关闭时如何向右滑动bootstrap 4模态对话框

将 Bootstrap 4 JS 导入项目