在“关闭”单击时禁用引导程序中的折叠动画答案

【问题标题】：Disable collapsing animation in bootstrap on "close" click在“关闭”单击时禁用引导程序中的折叠动画
【发布时间】：2016-01-28 13:29:43
【问题描述】：

我用引导程序制作了一些折叠面板。然后添加了一种方法来“关闭”并使用 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);
            }
        }

        }
});

做了一个小提琴来说明：

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

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

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

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap jsfiddle

【解决方案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();

    }

【讨论】：