bootstraps 4错误:折叠正在转换

Question

任何人都可以帮助我解决转换问题bootstrap 4.这是犯错误未捕获错误:崩溃是转换问题只有当不包括bootstrap css.在我的情况下bootstrap css冲突我的大css.任何人都可以帮助解决这个地狱

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer 1

此问题已在Bootstrap 4.0.0-beta上得到解决.4.2.1版本现已上市!

有几种方法可以下载它:

• 以zip文件下载最新版本.
• 克隆回购: git clone https://github.com/twbs/bootstrap.git
• 使用npm安装:npm install bootstrap
• 用纱线安装:yarn add bootstrap@4.2.1
• 使用Composer安装:composer require twbs/bootstrap:4.2.1
• 使用NuGet安装:CSS:Install-Package bootstrapSass:Install-Package bootstrap.sass

您可以在Beta 1发货清单中找到#21568链接以获取更多信息.

初步答复

Bootstrap v4.0.0-alpha.6版本出现错误,转换将在下一版本中解决.

有关详细信息,请参阅问题22256,提取21743和v4.0.0-beta里程碑链接.

有一段时间,您可以使用类似@Nayana_Das示例的解决方法.

Answer 2

使用以下代码折叠 div：

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

看看这个小提琴。