Question

我是Angular.js的新手，我在Angular.js中有垂直手风琴，但实际上我需要水平手风琴。这是垂直手风琴：http://jsfiddle.net/carpasse/RST62/

我需要像这样的水平手风琴一样的东西：http://stitchui.com/liteaccordion/请查看此链接。

代码

var directivesModule = angular.module('myModule', []);
directivesModule.directive('accordion', function factory(){
    return {
        priority:0,
        restrict:'E',
        transclude:true,
        replace:true,
        scope:{},
        template:'<div class="accordion" ng-transclude></div>',
        link: function(scope, iElement, iAttr){
             iElement.accordion({header: "h3.accordionTitle"});
        }
    };
});

directivesModule.directive('accordionTab', function(){
    return {
        priority:1,
        restrict:'E',
        replace:true,
        transclude:true,
        scope:{ title:'bind'},
        template:'<div><h3 class="accordionTitle"><a href="#">{{title}}</a></h3>' +
                 '<div ng-transclude></div></div>'
    };
});

Answer 1

试试此代码

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>AngularJS Accordion</title>  
  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
  <style type='text/css'>
    .thermo-buttons button{
      height: 40px;
      width: 50px;
      font-size: 9px;
      background-color: #252424;
      opacity: 0.5;
      color: #ffffff;
      font-weight: bold;
      border:1px solid #dddddd;
    }
    .thermo-buttons button.selected{
      background-color: #ff600a;
      opacity: 1.0;
    }
    .thermo-buttons button.activated{
      background-color: #ff600a;
      opacity: 1.0;
    }
    .thermo-buttons button :active{
      background-color: #ff600a;
    }
    .thermo-buttons .btn-accord {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      width: 60px;
      background-color: #dddddd;
      color: #000000;
      border-left: 1px solid #808080;
      opacity: 1.0;
    }
    .accord_list {

      -webkit-transition: 0.5s linear all;
      transition: 0.5s linear all;
    }
    .accord_list.ng-hide-add, .accord_list.ng-hide-remove
    {
      opacity: 1.0;

    }
    .accord_list.ng-hide-remove, .accord_list.ng-hide-add.ng-hide-add-active{
      width: 0px;
      opacity: 0.3;

    }
    .accord_list.ng-hide-remove.ng-hide-remove-active, .accord_list.ng-hide-add{

      width: 200px;
      opacity: 0.3;
    }
  </style>




  <script type='text/javascript'>

    function TodoCtrl($scope) {
      $scope.isaccordExpand = false;

      $scope.expandaccord = function () {
        if( $scope.isaccordExpand ){
          $scope.isaccordExpand = false;
        }else {
          $scope.isaccordExpand = true;
        }
      }


    }
  </script>

</head>

<body>

  <div ng-app>
    <div ng-controller="TodoCtrl">
      <table class="thermo-buttons">
        <tr>
          <td>
            <table class="accord_list" ng-show="isaccordExpand">
              <tr>
                <td><button >Accordion1</button></td>
                <td><button >Accordion2</button></td>
                <td><button >Accordion3</button></td>
                <td><button>Accordion4</button></td>
              </tr>
            </table>
          </td>
          <td><button class="btn-accord" ng-click="expandaccord()">Accordion</button></td>
        </tr>
      </table>
    </div>
  </div>


</body>

</html>

Answer 2

我使用angularjs，flexbox创建了一个水平手风琴。我相信这很简单，因为每支手风琴都有一个可以转换的手风琴项目。

<horizontal-accordion active-tab="ctrl.activeStep">
  <horizontal-accordion-item done="true">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, distinctio, ab, possimus fugit reprehenderit eligendi soluta expedita aspernatur eum minima tempore similique quasi saepe officiis modi. Aspernatur, commodi iusto ipsa.
  </horizontal-accordion-item>
  <horizontal-accordion-item>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quasi, laudantium, enim amet accusamus adipisci repudiandae nesciunt cumque odio voluptate quo dicta blanditiis vel eveniet a ducimus at modi dignissimos.
  </horizontal-accordion-item>
  <horizontal-accordion-item>
    Accordion content 3
  </horizontal-accordion-item>
  <horizontal-accordion-item done="true">
    Accordion content 4
  </horizontal-accordion-item>
</horizontal-accordion>

以下是Plnkr的链接：https://plnkr.co/edit/XPoTjvPXF5s2U0KLBCgB?p=preview

如何在Angular js制作水平手风琴？

2 个答案: