Question

当您单击面板标题时，我有多个可以打开和关闭（展开和折叠）的面板。我还有一个可以打开和关闭所有面板的按钮。它有点工作，但不是100％。

如果单击三个面板之一的标题，则按钮可以打开和关闭所有面板。然后两个面板将打开，一个将关闭。我想关闭所有面板或打开所有面板。

此外，有时面板关闭，但面板的内容仍然可见。

另外，如果你点击面板的标题两次，打开和关闭面板，那么打开和关闭所有面板的按钮不再会影响它......很多错误......

做一个小提琴来说明。

https://jsfiddle.net/fiddlejan/qz30pvjk/

HTML：

<body ng-app="app">
  <div ng-controller="controller as c" style="padding:10px;">

    <button class="btn" ng-click="add()" style="margin-bottom:5px;">
      add panel
    </button>
    <button class="btn" ng-click="collapseAllPanels()" style="margin-bottom:5px;">
      expand / collapse all panels
    </button>

    <!-- childeren -->
    <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 topright" ng-click="close(p, $event)"></span>
                </h4>
        </div>

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

</body>

由AngularJS引发的Jquery

  $scope.collapseAllPanels = function() {

    console.log("collapse / expand all panels");

    $('.node-panel').slideToggle("medium", function() {
      console.log("slide animation complete");
    });

  }

Answer 1

试试这个

<div class="panel-group">
    <div class="panel panel-info" ng-repeat="p in panels">
        <div class="panel-heading" style="cursor:pointer" ng-click="openSinglePanel(this)">
            <h4 class="panel-title">
                open / close - {{p}}
                <span class="glyphicon glyphicon-remove topright" ng-click="close(p, $event)"></span>
            </h4>
        </div>

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

$scope.openSinglePanel = function (panel) {
    $(panel).slideToggle("medium", function() {

    });
}

$scope.collapseAllPanels = function() {
    $.each($('.node-panel'), function (key, panel){
        $(panel).slideToggle("medium", function() {
            //console.log("slide animation complete");
        });
    });
}

AngularJS和jquery折叠/扩展多个引导程序面板

1 个答案: