我希望引导程序在一个将展开而另一个将关闭时折叠起来

编程问答 2022-08-13

问题描述

我已经尝试过此代码，但对我而言却有效，但问题是，当我在Angular中使用此代码时，该代码在jquery中出现错误，提示“在jquery中找不到折叠标签”。为什么这样的情况有人可以提供帮助我来解决这个问题...？

$('.button-click').click( function(e) {
    $('.collapse').collapse('hide');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>



  <a class="btn btn-primary button-click" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
 
   <a class="btn btn-primary button-click" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

解决方法

将jQuery与Angular结合使用不是正确的方法。相反，请使用ng-bootstrap之类的基于Angular的Bootstrap来固有地避免此类问题。

注意：在当前处于Alpha状态的Bootstrap 5中，无论如何jQuery will be dropped。

将Angular引导程序与ng-bootstrap配合使用，您有两种选择：

  1. 使用ng-bootstrap's collapse，如this stackblitz所示：
<button type="button" class="btn btn-primary" [class.active]="!isCollapsed" (click)="isCollapsed2 = true; isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
  Link with href
</button>
 
<button type="button" class="btn btn-primary" [class.active]="!isCollapsed2" (click)="isCollapsed = true; isCollapsed2 = !isCollapsed2"
          [attr.aria-expanded]="!isCollapsed2" aria-controls="collapseExample2">
  Link with href
</button>

<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div id="collapseExample2" [ngbCollapse]="isCollapsed2">
  <div class="card card-body">
    2 Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

当然，您可以编写一些精美的Angular方法来代替jQuery的$('.collapse').collapse('hide');，如this stackblitz所示。

public isCollapsed = [false,true];
resetAllCollapsedAndToggleCurrent (index) {
  this.isCollapsed.forEach((item,collapseIndex) => {
    if (index === collapseIndex) {
      this.isCollapsed[index] = !this.isCollapsed[index];
    } else {
      this.isCollapsed[collapseIndex] = true;
    }
  })
}

...带有此html：

<button type="button" class="btn btn-primary" [class.active]="!isCollapsed[0]" (click)="resetAllCollapsedAndToggleCurrent(0)"
          [attr.aria-expanded]="!isCollapsed[0]" aria-controls="collapseExample">
  Link with href
</button>
 
<button type="button" class="btn btn-primary" [class.active]="!isCollapsed[1]" (click)="resetAllCollapsedAndToggleCurrent(1)"
          [attr.aria-expanded]="!isCollapsed[1]" aria-controls="collapseExample2">
  Link with href
</button>

<div id="collapseExample" [ngbCollapse]="isCollapsed[0]">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div id="collapseExample2" [ngbCollapse]="isCollapsed[1]">
  <div class="card card-body">
    2 Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
    {li> {li> {em} （不是全部折叠）是由tabset pills表示的，您可以轻松地将其转移到示例中，如this stackblitz所示： 
<ngb-tabset type="pills">
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>1 Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>2 Anim pariatur cliche reprehenderit,craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

祝你好运！

angularangularhtmljquerytwitter-bootstrap