Mit einem anklickbaren Element in einem Bootstrap-Akkordeon-Header

Question

Ich versuche, ein Akkordeon zu verwenden und ein Kontrollkästchen innerhalb einer Kopfzeile zu haben. Wenn ich jedoch auf ein Kontrollkästchen in einem Akkordeon-Header klicke, wird das Akkordeon minimiert. Gibt es eine Möglichkeit, auf das Kontrollkästchen zu klicken, ohne dass das Akkordeon erweitert/minimiert wird?

Answer 1

Sie haben die Checkbox setzen außerhalb des Akkordeon-Toggle aber innerhalb der Akkordeon-Position Klasse, dh

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

und fügen Sie die CSS .accordion-heading a.accordion-toggle { display: inline-block; }

Answer 2

Der Klick Blasen bis zum Akkordeon-Header, so ist eine andere Möglichkeit (neben dem Bewegen des Kontrollkästchens außerhalb des Toggels, wie von anderen vorgeschlagen), das Blubbern zu stoppen.

Verwenden Sie einige JQuery wie:

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

oder mit einer kürzeren Checkbox Selektor:

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

Answer 3

Für ein ui-Bootstrap-Akkordeon-Element, müssen Sie zwei Dinge tun. 1) Sie müssen die Akkordeongruppenvorlage überschreiben, um div-Elemente anstelle von Anchor-Elementen zu verwenden, und fügen cursor: pointer in Ihrem CSS hinzu. Dies liegt daran, dass Browser Ankerelemente als Ziel eines Klickereignisses interpretieren, das das Routing auslöst, wenn bestimmte Elemente wie Schaltflächen im Ankerelement verschachtelt sind.

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

Dann müssen Sie Vorlage für das Gruppenelement Akkordeon verwenden.

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

2) Zweitens, was Sie es s stop propagation click event on inner element of header if you don t zu tun haben wollen, dass es Ihr Akkordeon zusammenbrechen. Üblicherweise sind es Eingabeelemente oder Schaltflächen.

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