Làm cách nào để thu gọn accordion Bootstrap khi nhấp vào div tiêu đề?

166

Trong một hiệp ước Bootstrap, thay vì yêu cầu nhấp vào avăn bản, tôi muốn làm cho nó sụp đổ khi nhấp vào bất cứ nơi nào trong panel-headingdiv.

Tôi đang sử dụng Bootstrap 3. Vì vậy, thay vì accordion, nó chỉ là một bảng điều khiển đóng mở. Bất kỳ ý tưởng làm thế nào để làm toàn bộ bảng điều khiển có thể nhấp?

twitter-bootstrap twitter-bootstrap-3

— 9 màu
nguồn

Vâng, bạn đã có một câu trả lời. Tuy nhiên, liên kết này sẽ giúp bạn tìm thấy các phong cách khác nhau của Bootstrap Accordion Menus designerlib.com/bootstrap-accordion-menu

— Karuppiah RK

291

Tất cả bạn cần làm là sử dụng ...

data-toggle="collapse"
data-target="#ElementToExpandOnClick"

... Trên phần tử bạn muốn nhấp để kích hoạt hiệu ứng thu gọn / mở rộng.

Phần tử với data-toggle="collapse"sẽ là phần tử để kích hoạt hiệu ứng. Các data-targetthuộc tính chỉ ra các yếu tố đó sẽ mở rộng khi hiệu ứng được kích hoạt.

Tùy chọn, bạn có thể đặt data-parentnếu bạn muốn tạo hiệu ứng accordion thay vì thu gọn độc lập, ví dụ:

data-parent="#accordion"

Tôi cũng sẽ thêm CSS sau vào các phần tử data-toggle="collapse"nếu chúng không có <a>thẻ, ví dụ:

.panel-heading {
    cursor: pointer;
}

Đây là một jsfiddle với html được sửa đổi từ tài liệu Bootstrap 3 .

— nghiệt ngã
nguồn

11

Có vẻ như đây phải là mã mặc định / mã demo. Đẹp hơn nhiều so với sử dụng <a>.

— dbn

Phương pháp này không hiệu quả với iphone. theo câu trả lời cho stackoverflow.com/questions/19866172/, nó cần phải được <a> (vì nó yêu cầu href) để có thể thu gọn trên iphone ... có ý tưởng nào không?

— minovsky

2

@minovsky Làm thế nào về bản cập nhật này của JSFiddle: jsfiddle.net/Tcgyx/60 ? Thật không may, tôi không có iPhone để kiểm tra. Tôi sẽ cập nhật câu trả lời của tôi nếu điều này hoạt động.

— nghiệt ngã

@grim cảm ơn vì sự khéo léo! Nó không phải lúc nào cũng hoạt động, nhưng hãy để tôi thử nghiệm nhiều hơn và tìm hiểu xem liệu tôi có thể tạo ra sự thất bại một cách đáng tin cậy hay không.

— minovsky

1

@wutzebaer Bạn có thể có role="tab button"và trình duyệt sẽ diễn giải cái đầu tiên trong danh sách mà nó hiểu (rất có thể tab). Mặc dù vậy, tôi không chắc cái nào trong hai cái này tốt hơn. Cố gắng tìm ý nghĩa của tabvà buttonvai trò và điều đó sẽ cho bạn câu trả lời để chọn.

— nghiệt ngã

67

Một cách khác là làm cho <a>toàn bộ của bạn lấp đầy tất cả không gian của panel-heading. Sử dụng phong cách này để làm như vậy:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Kiểm tra bản demo này ( http://jsfiddle.net/KbQyx/ ).

Sau đó, khi bạn nhấp vào tiêu đề, bạn thực sự đang nhấp vào <a>.

— bê
nguồn

Ah giải pháp tuyệt vời cho những người trong chúng ta sử dụng thư viện GWTBootstrap.

— tuyết rơi

Tôi đã không thấy điều này cho đến khi tôi thực hiện một giải pháp tương tự. Thay đổi CSS là thay đổi ít xâm lấn nhất đối với tôi. Tôi đã chọn display: inline-block, width: 100% và vì chúng tôi đang sử dụng Glyphicons cho chúng tôi, nên a: trước có lề-trái: -10px và lề-phải: 10px.

— Kirk Liêmohn

1

Phương pháp này không hoạt động trên các thiết bị iOS, thường là mối quan tâm chính khi làm việc với Bootstrap.

— Jared

Jared, bạn có thể giải thích? Tại sao công việc này không bị giới hạn ở một số phiên bản Safari nhất định?

— Tiến sĩ Jan-Philip Gehrcke

1

Ưu điểm của phương pháp này là nó cũng hoạt động cho Boostrap UI cho AngularJS (nơi bạn không muốn / cần JS của Bootstrap).

— Tiến sĩ Jan-Philip Gehrcke

12

Tôi đã nhận thấy một vài sai sót nhỏ trong jsfiddle của grim.

Để lấy con trỏ thay đổi thành một bàn tay cho toàn bộ bảng điều khiển, hãy sử dụng:

.panel-heading {
   cursor: pointer;
}

Tôi đã gỡ bỏ các <a>thẻ (một vấn đề phong cách) và giữ data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."trên panel-headingsuốt.

Tôi đã thêm một phương thức CSS để hiển thị chevron, sử dụng font-awesome.csstrong jsfiddle của tôi:

http://jsfiddle.net/weaversnap/7FqsX/1/

— WeaverSnap
nguồn

Điều này gần như hoạt động. Các chevron xuất hiện lộn ngược khi trang tải và tự sửa sau khi mở rộng và thu gọn một trong các bảng.

— Connie DeCinko

@ConnieDeCinko Thay đổi panel-headingđể panel-heading collapsedsửa lỗi chevrons lộn ngược.

— Amy Barrett

5

Đây là một giải pháp cho Bootstrap4. Bạn chỉ cần đặt card-headerlớp trong athẻ. Đây là một sửa đổi từ một ví dụ trong W3Schools .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

Mở rộng đoạn trích

— người dùng2233706
nguồn

4

Giải pháp đơn giản sẽ là loại bỏ phần đệm từ .panel-headingvà thêm vào .panel-title a.

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

Giải pháp này tương tự như giải pháp trên được đăng bởi bê , hơi khác một chút.

— Nhịp điệu Ruparelia
nguồn

1

Trên thực tế bảng điều khiển của tôi có biểu tượng mũi tên trạng thái sụp đổ này và tôi đã thử các câu trả lời khác trong bài đăng này, nhưng vị trí biểu tượng đã thay đổi, vì vậy đây là giải pháp với biểu tượng mũi tên trạng thái sụp đổ .

Thêm CSS tùy chỉnh này

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

Tín dụng đi đến người trả lời bài này .

Hy vọng giúp.

— shaijut
nguồn

0

Dưới đây là ví dụ hoạt động cho Bootstrap 4.3

<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>

Mở rộng đoạn trích

— Nhà phát triển
nguồn