Tener un elemento seleccionable en un encabezado de acordeón Bootstrap

Question

Estoy tratando de usar un acordeón y tengo una casilla de verificación dentro de un encabezado. Sin embargo, cuando hago clic en una casilla de verificación en un encabezado de acordeón, se contrae o expande el acordeón. ¿Hay alguna manera de hacer clic en la casilla sin expandir/colapsar el acordeón?

Answer 1

usted tiene que colocar el casilla fuera del acordeón de palanca pero dentro de la acordeón en dirección clase, es decir,

<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> 

y añadir el css .accordion-heading a.accordion-toggle { display: inline-block; }

Answer 2

El clic Burbujas hasta el encabezado del acordeón, por lo que otra posibilidad (además de mover la casilla de verificación fuera de la palanca, como lo sugirieron otros) es detener el burbujeo.

utilizar un poco de jQuery como:

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

o con un selector de casilla más corto:

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

Answer 3

Para un elemento de acordeón ui-boostrap, debe hacer dos cosas. 1) debe sobrescribir la plantilla de grupo de acordeón para usar elementos de div en lugar de elementos de anclaje y agregar cursor: puntero en su CSS. Esto se debe a que los navegadores interpretan los elementos de anclaje como el objetivo de cualquier evento de clic, lo que activa el enrutamiento cuando ciertos elementos, como los botones, están anidados dentro del elemento de anclaje.

<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> 

entonces usted tiene que utilizar la plantilla para el elemento grupo de acordeón.

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

2) La segunda cosa que hay que hacer es s stop propagation click event on inner element of header if you don t quieren que se derrumbe su acordeón. Usaly es elementos de entrada o botones.

<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>