ボタンをクリックしたらボックスが表示←→非表示、とかいう動きを、とりあえず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の内部要素で上下のスペースを取る工夫あり。
横の拡縮とかも出来そうなので、そこは各自工夫で。
ピンバック: metronidazole 250 mg flagyl
Greetings! I know this is kind of off topic but I was wondering if
you knew where I could locate a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having difficulty finding one?
Thanks a lot!
ピンバック: Vidalista
ピンバック: kamagra effervescent tablets uk
ピンバック: hydroxychloroquine sulfate tablet 200 mg
ピンバック: clomiphene Citrate 50mg men
Just want to say your article is as surprising. The clarity in your put up is
just excellent and i could suppose you are a professional on this
subject. Fine together with your permission let me to snatch your feed
to keep up to date with forthcoming post. Thank you one
million and please carry on the enjoyable work.
Good information. Lucky me I came across your website by chance (stumbleupon).
I’ve book-marked it for later!
You are so interesting! I do not think I’ve read a single thing like that before.
So nice to discover another person with unique thoughts on this subject.
Really.. thanks for starting this up. This website is
something that’s needed on the internet, someone with some originality!
Thank you a bunch for sharing this with all folks you really recognise what you are speaking about!
Bookmarked. Kindly additionally seek advice from my site =).
We can have a hyperlink alternate arrangement between us
Hello colleagues, how is the whole thing, and what you wish for to say concerning this paragraph, in my view its truly awesome in favor of me.
Howdy! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche.
Your blog provided us beneficial information to work on. You have done a extraordinary job!
whoah this blog is excellent i love reading your articles.
Stay up the good work! You understand, many individuals are looking
round for this information, you could help them greatly.
Hi, I believe your web site may be having web browser compatibility problems.
Whenever I look at your site in Safari, it looks fine but when opening in IE, it has some overlapping issues.
I just wanted to give you a quick heads up! Apart from that,
great website!
Wow, this post is pleasant, my younger sister is analyzing these kinds of
things, thus I am going to inform her.