Question

我想知道如何将手风琴旋转到90度，以便在下面的插件中进行回购和捆绑。我是css的新手。任何关于此的hekp表示赞赏。 Plunkr链接 - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview

<html>
  <head>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body data-ng-app="testApp" data-ng-controller="treeTable" >
    <div class="row">
<div class="col-md-12">
    <div class="tableheight ">
    <table class="treetable-nested childtable">
    <thead>
      <tr>
        <th style="width:5%;">
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> 
        <th >
          Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Date Modified
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
        <tr id={{item.id}}>
            <td>
                <button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
            </td>
            <td>
                {{item.name}}
            </td>
            <td class="cell-members">
<!--                {{item.version}} --> 0
            </td>
            <td class="cell-members">
<!--                {{item.size}}-->  0
            </td>
            <td class="cell-members" >
<!--                {{item.date}}-->   0
            </td>
            <td class="cell-members">
                {{item.label}}
            </td>
            <td class="cell-members">
                {{item.description}}
            </td>
        </tr>

        <tr ng-if='item.children && item.children.length > 0'>
            <td colspan="7" id="bundle_1" >
                <table ng-show="item.showTree" class="treetable-nested" style="width:100%;"> 
                    <tbody ng-repeat='bundles in item.children'>
                        <tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
                            <td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
                            <td>{{bundles.bundleName}}</td>
                            <td class="cell-members">{{bundles.bundleVersion}}</td>
                            <td class="cell-members">{{bundles.bundleSize}}</td>
                            <td class="cell-members">{{bundles.bundleModified}}</td>
                            <td class="cell-members">{{bundles.bundleLabels}}</td>
                            <td class="cell-members">{{bundles.bundleDescription}}</td>
                        </tr>
                        <tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;">
                            <td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td>
                            <td>{{components.value}}</td>
                            <td>{{components.Version}}</td>
                            <td>{{components.Size}}</td>
                            <td>{{components.Modified}}</td>
                            <td>{{components.Labels}}</td>
                            <td>{{components.Description}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
  </table>
    </div>

</div>

</div>
  </body>

</html>

Answer 1

以下是我解决问题的方法：

步骤1：弄清楚如何使用CSS旋转元素。您可以使用CSS transform property来旋转元素。

步骤2：定义一个CSS类，它将转换应用于图标

.accordion.expanded:before {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

步骤3：弄清楚如何通过AngularJS应用CSS类进行转换。您可以通过多种方式使用AngularJS切换CSS类。

一个选项是传递$event onlick

<button class="accordion" ng-click="displayChildren(item,item.id,$event)"></button>

并在元素上切换类，如：

$scope.displayChildren = function(item, id, event) { 
      angular.element((event.target)).toggleClass('expanded');
     //rest of your logic
}

第二个选项是操纵变量并将类设置为ng-class，如

<button class="accordion" ng-click='showComponents = !showComponents' ng-class="{'expanded' : showComponents}"></button>

你可以找到我试过的here

Answer 2

你可以这样做：

.accordion:active {
            transform: rotateX(90deg);
        }

如果你想让rotetes永久使用jquery：

$('.accordion').click(function(){$(this).css('transform', 'rotateX(90deg)');});

如果你想旋转并通过按钮旋转回来：

<style>
  .rotated {
        transform: rotateX(90deg);
    }
</style>

$('#btnRotator').click(function(){$('.accordion').toggleClass('rotated');});

Answer 3

使用Angular将活动类附加到应用CSS转换的扩展手风琴。

.accordion.active:before {
  transform:rotate(90deg);
}

看起来您可以添加ng-class="{'active' : item.showTree}"来完成按钮上的活动课程。您还有一个活跃类的:after目标，因此您也应该删除它。

将手风琴旋转90度

3 个答案: