单击 "close" 时禁用 bootstrap 中的折叠动画

Question

我用 bootstrap 制作了一些折叠面板。然后向 "close" 添加方法并使用 angular 删除面板。唯一的问题是，当我关闭面板时，折叠 open/close 功能仍然有效。所以面板可能会打开然后消失，而实际上它应该消失。

这是HTML

的简化版本

    <div class="panel-group">
    <div class="panel panel-info fadein fadeout" ng-repeat="p in panels">
        <div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
            <h4 class="panel-title">
                open / close - {{p}}
                <span class="glyphicon glyphicon-remove pull-right" ng-click="close(p)"></span>
            </h4>
        </div>

        <div id="test_{{p}}" class="panel-collapse collapse" aria-expanded="false">
            <div class="panel-body">
                hello {{p}}
            </div>
        </div>
    </div>
</div>

和angularJS

angular.module('app', ['ngAnimate'])

.controller('controller', function($scope){

    var i = 4;

    $scope.panels = ['panel_1', 'panel_2', 'panel_3']

    $scope.add = function(){
        console.log('add');
      $scope.panels.push('panel_' + i++);
    }

    $scope.close = function (p) {

        console.log('close ' + p);

            for (var i = 0; i < $scope.panels.length; i++){
                if ($scope.panels[i] == p){
                    $scope.panels.splice(i, 1);
            }
        }

        }
});

做了一个fiddle来说明：

https://jsfiddle.net/fiddlejan/82bmcyt0/

当你点击关闭时，右边的十字。面板将 "open"，然后消失（淡出动画在这里似乎不起作用）。我希望关闭按钮在您单击关闭时仅删除面板。不是 "open" 或 "close" 面板。

因此，如果单击关闭按钮，面板会折叠，opening/close 功能应该被禁用。

Answer 1

将事件对象添加到您的 ng-click 定义中：

<span class="glyphicon glyphicon-remove pull-right" ng-click="close(p, $event)"></span>

并在您的事件处理程序中使用该对象：

    $scope.close = function (p, e) {

            console.log('close ' + p);


        for (var i = 0; i < $scope.panels.length; i++){
            if ($scope.panels[i] == p){
                $scope.panels.splice(i, 1);
        }
    }
    e.stopPropagation();

    }

单击 "close" 时禁用 bootstrap 中的折叠动画

Disable collapsing animation in bootstrap on "close" click

javascript

jquery

jsfiddle

twitter-bootstrap

angularjs