Có phần tử có thể nhấp trong tiêu đề accordion Bootstrap

Question

Tôi đang cố gắng sử dụng accordion và có hộp kiểm bên trong tiêu đề. Tuy nhiên, khi tôi bấm vào một hộp kiểm trong một tiêu đề accordion, nó sụp đổ hoặc mở rộng accordion. Có cách nào để bấm vào hộp kiểm mà không có accordion mở rộng/sụp đổ?

Answer 1

Bạn phải đặt hộp kiểm ngoài accordion Toggle nhưng bên trong accordion hướng lớp, tức,

<div class="accordion-heading"> 
    <input type="checkbox" name="box"/> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseone"> 
     <p>Heading1</p> 
    </a> 
</div> 

và thêm css .accordion-heading a.accordion-toggle { display: inline-block; }

Answer 2

Các nhấp chuột bong bóng lên đến tiêu đề accordion, do đó, một khả năng khác (bên cạnh việc di chuyển hộp kiểm bên ngoài chuyển đổi như đề xuất của người khác) là để ngăn chặn các bong bóng.

Sử dụng một số JQuery như:

$("input[type=checkbox]").on("click", function(event) { 
    event.stopPropagation(); 
}); 

hoặc với một chọn hộp kiểm ngắn:

$(":checkbox").on("click", function(event) { 
    event.stopPropagation(); 
}); 

Answer 3

Đối với một yếu tố accordion ui-boostrap, bạn phải làm hai việc. 1) bạn phải ghi đè lên mẫu nhóm accordion để sử dụng các phần tử div thay vì các phần tử neo và thêm con trỏ: con trỏ trong CSS của bạn. Điều này là do trình duyệt giải thích các phần tử neo làm đích của bất kỳ sự kiện nhấp chuột nào, điều này kích hoạt định tuyến khi các phần tử nhất định như các nút được lồng trong phần tử neo.

<script type="text/ng-template" id="group-template.html"> 
     <div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="panel-heading" ng-keypress="toggleOpen($event)"> 
      <div class="panel-title"> 
       <div style="cursor:pointer;" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span></div> 
      </div> 
     </div> 
     <div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen"> 
      <div class="panel-body" ng-transclude></div> 
     </div>        
    </script> 

Sau đó, bạn phải sử dụng mẫu cho phần tử nhóm accordion.

<div uib-accordion-group template-url="group-template.html" 
         is-open="isOpen" ng-init="isOpen = true" 
         ng-repeat="q in qs"> 

2) Điều thứ hai bạn phải làm điều đó s stop propagation click event on inner element of header if you don t muốn nó thu gọn accordion của bạn. Usaly nó là các yếu tố đầu vào hoặc nút.

<uib-accordion-heading ng-click="isOpen = !isOpen"> 
    <lable>Title</lable>                         
    <input required ng-click="$event.stopPropagation()"/>            
    <button ng-click="doSomething;$event.stopPropagation();"> 
</uib-accordion-heading>