Bir Bootstrap akordeon başlığında

Question

tıklanabilir bir öğeye sahip olmak Bir akordeon kullanmaya çalışıyorum ve bir başlık içinde bir onay kutusu var. Ancak, bir akordeon başlığında bir onay kutusunu tıklattığımda, akordeonu daraltır veya genişletir. Akordeon genişleme/daraltmadan onay kutusunu tıklamanın bir yolu var mı?

Answer 1

Sen akordiyon-geçiş dışında onay kutusunu yerleştirmek zorunda ama akordiyon-başlığı sınıf, yani

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

ve eklemek css .accordion-heading a.accordion-toggle { display: inline-block; }

Answer 2

tık içeride akordeon başlığına kadar kabarcıklar, yani başka bir olasılık (diğerlerinin önerdiği gibi, onay kutusunun dışındaki onay kutusunun hareket ettirilmesinin yanında) köpürmeyi durdurmaktır.

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

veya daha kısa bir onay kutusu seçici ile:

gibi bazı JQuery kullanın

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

Answer 3

bir ui-boostrap akordeon öğe için, iki şey yapmanız gerekir. 1) akordeon grubu şablonunu bağlantı öğeleri yerine div öğelerini kullanmak için geçersiz kılmanız ve CSS'nize imleç: işaretçisini eklemeniz gerekir. Bunun nedeni, bağlantı öğelerini, herhangi bir tıklama olayının hedefi olarak yorumlayan tarayıcılar nedeniyle, düğmeler gibi belirli öğeler ankraj elemanının içine yerleştirildiğinde yönlendirmeyi tetikler.

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

Ardından, akordeon grup öğesi için şablon kullanmanız gerekir. bunu s stop propagation click event on inner element of header if you don t yapmak zorunda

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

2) İkinci şey sizin akordeon daraltmak istiyoruz. Usaly, giriş elemanları veya düğmelerdir.

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