カテゴリー: Work Tips

ボタンをクリックしたらボックスが表示←→非表示、とかいう動きを、とりあえずclassを付けたらとりあえず何とかなる、という発想で解決した手法。

基本形。「.btnというclassが付いたボタンをクリックしたら、.openが付いてるdivに.activeというclassを追加する」という仕組み。

▼HTML

ボタン

ボックス

▼JS

▼CSS

.open{display:none;}

.open.active{display:block;}

ポイントはCSSでopenはdisplay:noneで非表示にさせておいた上で、.activeが付いたらdisplay:blockにする点。
あと、classに向けて付与させるためのものか、反映させる要素にclass設定が入ってないとダメっぽい？（この場合.openのこと。#openにしてJSの指定を#openにしてもclass付与されない）

さらに、これに「.btnも色が変わる」とボタン自体にもクラスを付けた場合はこのようになる。

classの指定でもいいが、発動起点となるクリックした要素事態だからthisという指定でもOKらしい。その際は”は使わない。

    $(this).toggleClass('active');

これが「3つのボタン＆3つのboxの開閉」となったらclassを変えて設置する。（HTMLとCSSの内容は書くのが面倒なので各自対応で）

ただ、上記の内容だとbtn01をクリックしbtn02をクリックすると、box1とbox2が同じ画面にあることになる。これはtoggleClassはclassを付け外しする命令のため、もう一度ボタンを押さないとクラスが外れないため。そこでクラスを付ける・外すだけの命令もある。

toggleClass・・・クリックするたびにクラスを付ける・外すを繰り返す
addClass・・・クラスを付ける
removeClass・・・クラスを外す

addClassでクラスを付けたらクラスはそのままになるので、クラスを消す処理が必要な場合はremoveClassで確実に外す処理が必要となる。
「画面には1つのboxだけが表示されて出し入れされる」というサンプルは以下の通りとなる。

めんどくさっ！
toggleClassではなくaddClassとremoveClassを組み合わせて、一つのボタンをクリックしたら他の要素からremoveClassでactiveを外す、という命令にすると対応可能、というわけ。
もっとスクリプトで高度なやり方がありそうだが、手持ちの武器でできる簡単な実装はこんな感じとなる。

ここまでは「クリックしたら」だったが、発動処理を「マウスオーバーしたら」にすることも可能。

あとおまけ。display:block、noneだとパッと開いちゃうので、これを少々アニメっぽく動く縦の拡縮にすることもできる。

.box{
 max-height: 0;
 overflow-y: hidden;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}

.box.active{
 max-height:1000px;
 -webkit-transition: all 0.8s;
 -moz-transition: all 0.8s;
 -ms-transition: all 0.8s;
 -o-transition: all 0.8s;
 transition: all 0.8s;
}

つまり、max-heightの高さに加えてtransitionでアニメっぽく見せている処理にしちゃうわけですな。
これも気を付けないといけないのは、.boxに上下のpaddingとか使っちゃうとそのスペース分だけ画面に残ってしまうので、.boxの内部要素で上下のスペースを取る工夫あり。
横の拡縮とかも出来そうなので、そこは各自工夫で。