在Bootstrap手風琴接頭中有一個可點擊元素

我正在嘗試使用手風琴，並在標題內部有一個複選框。但是，當我點擊手風琴標題中的複選框時，它會摺疊或擴展手風琴。有沒有辦法在沒有手風琴展開/摺疊的情況下點擊複選框？在Bootstrap手風琴接頭中有一個可點擊元素

2012-09-25 Aaron Reba

嘗試添加此css：.accordion-heading a.accordion-toggle {display：inline-block; } – scumah

啊，謝謝！我移動了我的複選框，現在它就是我想要的。 –

你可以請張貼一些代碼。我無法得到它的工作。 – foobar

你必須把複選框的手風琴撥動之外，但手風琴 - 航向類，即

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

，並添加CSS .accordion-heading a.accordion-toggle { display: inline-block; }

來源

2013-01-02 06:25:39

的點擊裏面氣泡直到手風琴的頭部，所以另一種可能性（除了按照其他人的建議將複選框移到切換開關之外）是停止冒泡。

使用一些JQuery的，如：

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

或用較短的複選框選擇：

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

來源

2013-10-03 12:12:46 Moolie

有沒有做同樣的角度方式？ – ram

我有點晚，但有一種方法：''ng-click =「$ event.stopPropagation（）」''' –

對於UI的自舉手風琴元素，你必須做兩件事情。 1）你必須重寫accordion-group模板以使用div元素而不是錨元素，並在你的CSS中添加cursor：pointer。這是由於瀏覽器將錨點元素解釋爲任何點擊事件的目標，當某些元素（如按鈕）嵌套在錨點元素內時會觸發路由。

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

然後，你必須使用模板手風琴的組元素。

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

2）你必須這樣做s stop propagation click event on inner element of header if you don噸第二件事想它崩潰你的手風琴。 Usaly它是輸入元素或按鈕。

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

來源

2017-06-15 11:04:32 trueboroda

在Bootstrap手風琴接頭中有一個可點擊元素

回答

相關問題