Question

我设计了带有向上和向下箭头的手风琴。当我单击整行时，它可以折叠，但是当我直接单击上/下图标时，它会切换图标，但不会切换我的手风琴（不打开/关闭我的手风琴）。它调用了我的函数，但没有改变手风琴。

点击手风琴时，我将使用材质图标作为图标，并使用 angularjs 来调用该函数。

我不知道如何解决我的图标行为！

任何帮助都非常感谢。

这只是我的一段代码，以了解如何定义手风琴：

//Here is my angularjs code.

$scope.showTest = false;

$scope.toggleShowTest = function () {
  $scope.showTest = !$scope.showTest;
}

<div class="card">
    <div class="row" data-toggle="collapse" data-target="#test" aria-expanded="false" 
         aria-controls="test" style="cursor: pointer;" ng-click="toggleShowTest()">
        <div class="col-6 col-md-4" id="header">
            <h4 class="mb-0">
                Transaction Report
            </h4>
        </div>
        <div class="col col-md offset-md-4">
                <i class="material-icons" ng-if="!showTest">keyboard_arrow_down</i>
                <i class="material-icons" ng-if="showTest">keyboard_arrow_up</i>
        </div>
    </div><!-- row ends -->
    <div id="test" class="collapse" aria-labelledby="header">
        <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>

带有向上/向下箭头图标的可折叠面板？

0 个答案: