Поверните аккордеон 90 градусов

Я хотел бы знать, как я могу превратить аккордеон на 90 градусов по щелчку его для репо и пучков в нижнем plunkr. Я новичок в css. Любой hekp на этом оценивается. Plunkr ссылка - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview Поверните аккордеон 90 градусов

<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>

источник

2017-02-06 shaaa

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

@scott Marcus Я видел это в других примерах. Но я хотел бы знать, как я могу использовать его в своем примере. – shaaa

Вы можете использовать его точно так же, как @ScottMarcus описал – baao

Вот как я решил проблему:

Шаг 1: Рисунок, как вращать элементы с помощью CSS. Вы можете использовать CSS transform property для поворота элементов.

Шаг 2: Определить класс CSS, который будет применяться преобразование к иконе

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

Шаг 3: Выяснить, как применить класс CSS с преобразованием через AngularJS. Вы можете переключать классы CSS с помощью AngularJS несколькими способами.

Один из вариантов будут прохождение $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

источник

2017-02-06 18:42:11

Вы можете сделать это:

.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');});

источник

2017-02-06 17:15:23

Это приведет к вращению элемента '' (которого не существует), 90 degress, когда он станет активным, и затем будет вращаться назад, когда это не так. Даже если это сработало, я не думаю, что это то, чего хочет OP. –

Спасибо @ScottMarcus, но я тестирую это, он будет скрыт до тех пор, пока мышь не опустится. ** активный ** не работает подобный ** hover **. –

Это не сработает, поскольку нет такого элемента, как ''. Кроме того, я ничего не говорил о зависании. Я сказал, что даже если код будет работать, весь аккордеон будет вращаться только тогда, когда он станет активным, а затем он будет вращаться назад, когда он больше не будет. Это не то, чего хочет OP. –

Использование Угловое для присоединения активного класса к расширенным аккордеонам, применяющим CSS-преобразование.

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

Похоже, вы можете добавить ng-class="{'active' : item.showTree}" выполнить активный класс по кнопке. У вас также есть цель :after для активного класса, поэтому вы тоже должны ее удалить.

источник

2017-02-06 18:12:48 Alejalapeno

Поверните аккордеон 90 градусов

ответ

Смежные вопросы