Question

我正在尝试使用手风琴并在标题内部设置一个复选框。但是，当我单击手风琴标题中的复选框时，它会折叠或展开手风琴。有没有办法在没有手风琴展开/折叠的情况下点击复选框？

Answer 1

点击气泡直到手风琴标题，所以另一种可能性（除了按照其他人的建议移动开关外的复选框）是停止冒泡。

使用一些JQuery，如：

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

或使用较短的复选框选择器：

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

Answer 2

您必须将复选框放在 accordion-toggle 之外但在 accordion-heading 类中，即，

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

Answer 3

对于ui-boostrap手风琴元素，你必须做两件事。 1）你必须覆盖accordion-group模板以使用div元素而不是anchor元素，并在CSS中添加cursor：pointer。这是因为浏览器将锚元素解释为任何click事件的目标，当某些元素（如按钮）嵌套在anchor元素内时触发路由。

    <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要让它折叠你的手风琴。通常它是输入元素或按钮。

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

在Bootstrap手风琴标题中有一个可点击的元素

3 个答案: