javascript - 在 "close"单击时禁用 Bootstrap 中的折叠动画

Question

我用 Bootstrap 制作了一些折叠面板。然后添加了一种方法来“关闭”并使用 Angular 移除面板。唯一的问题是当我关闭面板时，折叠、打开/关闭功能仍然有效。所以面板可能会打开然后消失，而实际上它应该消失。

这是 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/

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

所以在点击关闭按钮的情况下，面板折叠，打开/关闭功能应该被禁用。

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();

    }