Bootstrap手风琴 - 开始全部关闭

Question

所以我的页面上有一个bootstrap风格的手风琴 - 但是一开始，第一个面板是打开的。 如何才能使它在加载页面时全部关闭？

任何帮助都会非常感激！非常感谢！

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-minus text-primary"></i> Overview</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">Contents panel 1</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 2</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
            </h4>
        </div>
        <div id="panel4" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
            </h4>
        </div>
        <div id="panel5" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
            </h4>
        </div>
        <div id="panel6" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
            </h4>
        </div>
        <div id="panel7" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
            </h4>
        </div>
        <div id="panel8" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
</div>

Answer 1

只需从panel1中删除.in。

<div id="panel1" class="panel-collapse collapse">
   <div class="panel-body">Contents panel 1</div>
</div>

Answer 2

引导程序4和4+从show中删除类collapse show

<div class="collapse">
    <div class="card-body"></div>
</div>

Answer 3

对于Boostrap 4，折叠默认情况下是关闭的。如果希望它在页面加载时显示内容，则只需添加类show：

<div class="collapse">...</div>  //Content is hidden on page load

<div class="collapse show">...</div>  //Content is shown on page load

根据Bootstrap 4 documention：

• .collapse隐藏内容
• .collapse.show显示内容

Answer 4

对于Bootstrap 5，您还需要折叠按钮，否则正文不会显示标题仍会突出显示，并且指示卡已打开的图标。

默认为;

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
</button>

您需要在按钮上添加 collapsed 并告诉 aria 它没有像这样展开；

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
        Heading Text
</button>

然后可以通过从 show 中删除 class="accordion-collapse collapse show" 来正常处理正文

<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
 <div class="accordion-body">
  Body Text
 </div>
</div>

Answer 5

引导程序 5：

将类 collapsed 添加到 accordion-button

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
    Accordion Item
</button>

从 show 中删除类 accordion-collapse

<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">content...</div>
</div>

Answer 6

您必须在标题中添加

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, Observable } from 'rxjs';

import { ChatMessage } from '../models/chat.message';

import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import { AlertService } from './alert.service';


@Injectable({
  providedIn: 'root'
})
export class ChatService {

  private activeUsersSubject = new Subject<any>();
  private chatMessagesSubject = new Subject<any>();

  private apiUrl: string = environment.apiUrl;
  private chatUrl: string = 'http://localhost:5000/socket';

  stompClient = null;

  activeUsers: string[] = [];
  messages: ChatMessage[] = [];

  constructor(private http: HttpClient, private alertService: AlertService) {
      this.connect();
  }

  public connect() {

    const socket = new SockJS(this.chatUrl);
    this.stompClient = Stomp.over(socket);
    const _this = this;
    _this.stompClient.connect({}, lamda => {
      this.stompClient.subscribe('/user/queue/reply', function(msg) {
        _this.onMessageRecieved(msg);
     });

     this.stompClient.subscribe('/chat/', function(msg) {
      _this.onMessageRecieved(msg);
     });
      this.setConnected(true);
      this.connectToChat();
    }, error => {
      this.alertService.error('Unable to connect to WebSocket server: ' + error);
    });

  }

  public getChatUsers(): Observable<any> {
    return this.activeUsersSubject.asObservable();
  }

  public getChatMessages(): Observable<ChatMessage[]> {
    return this.chatMessagesSubject.asObservable();
  }

    disconnect() {
      if (this.stompClient != null) {
        this.stompClient.disconnect();
      }
      this.setConnected(false);
    }

    public send(message: ChatMessage) {
      try {
        this.stompClient.send('/app/send/message', {}, JSON.stringify(message));
      } catch (error) {
        this.alertService.error(error);
      }
    }

    private async connectToChat() {

      const message: ChatMessage = <ChatMessage>({
        sender: 'Sam',
        type: 'JOIN'
      });

      try {
         this.stompClient.send('/app/send/addActiveUser', {}, JSON.stringify(message));
      } catch (error) {
        this.alertService.error(error);
      }

    }

    private onMessageRecieved(msg) {
      const message = JSON.parse(msg.body);
      if (message.type === 'CHAT') {
        this.chatMessagesSubject.next(message);
      } else if (message.type === 'JOIN') {
        console.log('JOIN message: ' + msg);
        this.activeUsersSubject.next(message.sender);
      } else if (message.type === 'LEAVE') {
        this.activeUsers.forEach( (item, index) => {
          if (item === message.sender) {
            this.activeUsers.splice(index, 1);
          }
        });
      }
    }

    private setConnected(connected: boolean) {

      if (connected) {
        console.log('Connected!');
      } else {
        console.log('Disconnected!');
      }
    }
}

然后，在体内

aria-expanded="true"