Dữ liệu thu gọn bootstrap-parent không hoạt động

Question

Tôi đang sử dụng bootstrap 2.2.1 và vì lý do gì đó thuộc tính data-parent không làm những gì được dự định. Nó không đóng một mục tiêu đã mở trước đó khi tôi nhấp vào một mục tiêu khác. Dưới đây là fiddle với mã bên dưới, mọi ý tưởng về cách sửa lỗi này?

<div id="accordion"> 
    <ul> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a> 
      <ul id="document" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">option 2</a> 
     </li> 
     <li> 
      <a href="#">option 3</a> 
     </li> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a> 
      <ul id="document2" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

Tôi không thể làm việc này - đây có thể là một cái gì đó trong Bootstrap JS liên quan đến việc bạn đang sử dụng danh sách thay vì divs?

Vì vậy, để làm cho nó hoạt động, tôi phải ghi đè sự kiện nhấp chuột. Dựa trên câu hỏi này ở đây: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

tôi đã thêm một lớp accordion-toggle cho mỗi liên kết tùy chọn, và sau đó thêm mã JavaScript sau để có được nó để làm việc:

$(document).on('click', '.accordion-toggle', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 

     var parent = $this.data('parent'); 
     var actives = parent && $(parent).find('.collapse.in'); 

     // From bootstrap itself 
     if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
     } 

     var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

     $(target).collapse('toggle'); 
});​ 

fiddle Điều này cho thấy nó trong hành động.

Answer 2

cũng đã phải vật lộn với sự sụp đổ của bootstrap. Tôi đã cố gắng để làm một cái gì đó hơi khác nhau. Tôi muốn hành vi chuyển đổi nội tuyến. Xem JS fiddle của tôi dưới đây. Những gì tôi thấy là bootstrap dường như yêu cầu sự tồn tại của div "accordion-group" ngoài thuộc tính data-parent được bao gồm trong tài liệu của họ. Vì vậy, hoặc là có một lỗi trong JS hoặc tài liệu của họ không bao gồm nó. Tôi cũng đã phải không các kiểu quần áo trên div accordion nhóm ...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2"> 
    <div class="accordion-group" style="border:0;padding:0;margin:0"> 
     <div id="collapseOne" class="collapse in"> 
      Foo Bar... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Show Herp Derp 
      </a> 
     </div> 
     <div id="collapseTwo" class="collapse"> 
      Herp Derp... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Show Foo Bar 
      </a> 
     </div> 
    </div> 
</div> 

Answer 3

Bạn phải sử dụng lớp accordion nhóm trong các mục của bạn, nhìn thấy vấn đề https://github.com/twitter/bootstrap/issues/4988

Answer 4

Nó nói trong tài liệu Bootstrap:

Nếu có bộ chọn, thì tất cả các phần tử đóng mở trong cha mẹ được chỉ định sẽ đóng khi đóng gói này mục được hiển thị. (tương tự như hành vi accordion truyền thống - này phụ thuộc vào các panel lớp)

vì vậy nó phải được sử dụng với bảng điều khiển nhóm, nhưng bạn có thể ghi đè lên javascript anyway.

http://getbootstrap.com/javascript/#collapse-options