2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

なめらかアコーディオンパネル

Posted at

 どうでもいいけどサンプルのラテン語なんだろうあれ

なめらかではないアコーディオンパネル

index.html

<dl>
	<dt ng-click="showPanel=1">Step.1</dt>
	<dd ng-hide="showPanel!=1"><p>...</p></dd>
	<dt ng-click="showPanel=2">Step.2</dt>
	<dd ng-hide="showPanel!=2"><p>.../p></dd>
	<dt ng-click="showPanel=3">Step.3</dt>
	<dd ng-hide="showPanel!=3"><p>...</p></dd>
</dl>

 dt要素のクリックでshowPanelの値を更新、値によってdd要素の表示を切り替えています。
 アコーディオン感はありませんが取り敢えずぱたぱた開閉はします。

なめら化

 前回と同じくngAnimateを追加します。

index.html

<script type="application/javascript" src="../angular/angular-animate.js"></script>

main.js

angular.module('sample', ['ngAnimate']).controller('IndexController',
		[ '$scope', function($scope) {} ]);

 ngAnimateを追加すると表示/非表示(ngHide)の切替時にngHideAddやngHideRemoveが追加されるようになります。一秒くらいですぐ外されるクラスです。
 この追加されるクラスに対応するCSSを書いてやります。

base.css

dd {
	margin: 0;
	background: #d4d0c8;
	overflow: hidden;
	transition: 1s linear;
	-webkit-transition: linear 1s;
	-moz-transition: linear 1s;
	-o-transition: linear 1s;
}

dd:not(.ng-hide){
	max-height: 50em;
}

dd.ng-hide{
	max-height: 0em;
}
 
.ng-hide-remove {
	max-height: 0em;
}

.ng-hide-add{
	max-height:50em;
}


 で、開閉が同時に行われないのはなぜだろうなこれ

ngClickを用いた開閉

 開いているパネルを閉じることができないのでngClickに動作を突っ込んでやります。
 現在は簡単にng-click="showPanel=1"としていますのでここをng-click="onClickHeader(1)とかに変更。

main.js

$scope.onClickHeader=function(num){
	if($scope.showPanel==num){
		$scope.showPanel=0;
	}else{
		$scope.showPanel=num;
	}
}

 これで開いているパネルも閉じることができるようになりました。
 開閉が同時に行われない問題の対策をご存じの方はご教示ください……(:3」∠)

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?