■ 方法
【1】CSS/JavaScriptを使用する
=> style="display: none" を使用して、切り替える
【2】jQueryを使用する
[1] hide/show を使用する [2] toggle / fadeToggle / slideToggle を使用する
■ 注意
「style="display: none"」と「visibilityプロパティ」の違い
[1] style="display: none" を使用して、切り替える => 描画領域自体が削除される [2] visibilityプロパティを使用して、切り替える => 描画領域はそのままで非表示
非表示した際のブラウザ上の動作について
* ラジオボタンなどの一部を非表示にした状態で、マウスではなく、矢印キーなどでカーソル移動した際に 全てを表示した動きとは異なる挙動になる。 => 非表示だけでなく、非活性にすれば回避できる非活性については、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35752039.html
■ サンプル
【1】CSS/JavaScript
概要[1] getElementsByTagNameで、タグのオブジェクトを取得 [2] 取得したオブジェクトからclassNameで、クラス名を取得し、該当するタグを探す [3] 該当するタグを見つけたら、styleのdisplayに表示(block)・非表示(none)を切り替えるサンプルコード
//初期設定
function menuInit() {
if(!document.getElementsByTagName) {
// DOMをサポートしていなければ実行しないで抜ける
return;
}
//HTML中の「div」タグを取得
var objs = document.getElementsByTagName("div");
for(var i = 0; i < objs.length; i++) {
//クラスネーム「displayMenu」を探して非表示
if(objs[i].className == "displayMenu") {
objs[i].style.display = "none";
}
}
}
//表示・非表示切替関数
function switchDisplay(id) {
if(!document.getElementsByTagName) {
//DOMをサポートしていなければ実行しないで抜ける
return;
}
//ツリーのオブジェクトを取得
var obj=document.getElementById(id);
//表示・非表示切替処理
if(obj.style.display == "block") {
obj.style.display = "none";
} else {
obj.style.display = "block";
}
return false;
}
【2】jQuery
* fadeToggleでスイッチON/OFFを実装* 使用しているアイコンについては、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35506135.html
<html> <head> <meta charset="UTF-8"> <script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> <link rel="stylesheet" href="">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style type="text/css"> div.parent { border: black solid; overflow: auto; } .custom-switch { float:right; } .custom-switch-on { color: DarkOrange; } .custom-switch-off { color: SlateGray; } .custom-switch-on:hover { color: LightSkyBlue; cursor: pointer; } </style> </head> <body> <div class="parent"> <div id="power-switch" class="fa-stack fa-lg custom-switch custom-switch-on"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-power-off fa-stack-1x fa-inverse"></i> </div> <div id="television"> <i class="fa fa-television fa-5x"></i> </div> </div> <script> $(function () { $("#power-switch").on("click", function(){ $(this).toggleClass("custom-switch-off"); $("#television").fadeToggle("slow"); }); }); </script> </body> </html>
参考資料
【1】CSS/JavaScriptを使用する
http://plusone.jpn.org/javascript/sample/acc/treemenu.html#treemenuhttp://allabout.co.jp/gm/gc/23973/
【2】jQueryを使用する
http://www.task-notes.com/entry/20150112/1420994026jQuery APIリファレンス
http://semooh.jp/jquery/api/effects/
* toggle
http://jump-up.info/jquery/jquery_toggle.html
