我对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>'
};
});
最佳答案
试试这个代码
<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>