電子書籍の厳選無料作品が豊富！

クリックする度に表示/非表示が切り替わるスクリプト

解決済

  • 質問者：humi_ak
  • 質問日時：
  • 回答数：7件

クリックする度に表示/非表示が切り替わるスクリプト

Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、
下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。

調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。

どなたかご教授お願いします。

<html>
<head>
<title>Template</title>

<style type="text/css">
span.content{
background-color: #FFCC66;
width: 100;
height: 20;
}
div.subcontent {
position: absolute;
top: 40px;
left: 40px;}
</style>

<script language="javascript">

function cont_pop(){
//ここをどうすれば良いでしょうか？
}

</script>
</head>
<body bgcolor=#EEEEEE>

<span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR>

↓これを表示/非表示させたい
<div class="subcontent" id="scon1">
SubContents
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#3です。



うっかりフラグなんてつくっちゃったけど、不要でしたね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
div { width:150px; float:left; }
hr { clear:left; }
</style>
</head>
<body>
<div id="cont1">Content1</div>
<div id="cont2">Content2</div>
<hr>
<div id="scon1">SubContents1</div>
<div id="scon2">SubContents2</div>

<script type="text/javascript">
<!--
(function() {
function toggleSet(id1, id2) {
var el = document.getElementById(id1);
try { el.addEventListener('click', toggle(id2), false);
} catch(e) { el.attachEvent('onclick', toggle(id2) ); }
}

function toggle(id2) {
return function() {
var s = document.getElementById(id2).style;
s.visibility = s.visibility=='hidden'?'visible':'hidden';
}
}

toggleSet('cont1', 'scon1');
toggleSet('cont2', 'scon2');
})();
//-->
</script>
</body>
</html>

以下は関係ありません。
----------------------------------------------
回答は簡単なほうがいいと思っています。（＝質問者がわかりやすい）
まぁ、あまり簡潔にすぎると、まったく理解されない場合もあるけど…

document.getElementById('cont1').onclick = function() {
var s = document.getElementById('scon1').style;
s.display = s.display=='none'?'block':'none';
}
ですんでしまうものが、長く複雑に…
それに匿名関数ではないほうが、わかりやすいかも。

ということで、なるべく努力はしますし、まとまりのある機能を一般化したようなものの場合はしているつもり。
でも、ごく簡単なものや考え方のみの場合は必要ないように感じています。（自分のお勉強とは別にして）
なので、いつもというわけにはいかないかも。
    • good
    • 0
    • 件
通報する
この回答へのお礼

レベルの低い私に合わせてくださってありがとうございます(>_<)

この私も上のようなコードを作っていました(エラー出て悩んでましたけど^^;)
一般化すれば使いまわしも利きますし便利なんですけど、その分コードも複雑になりますよね。

でも今回のお二人の回答に載っていたコードを見てJavaScriptの書き方を割と理解できた気がします。
条件文の省略形然り、関数の使い方然り、勉強になりました。

大変感謝しています。
ありがとうございました。

通報する
お礼日時：2010/04/14 17:20

No.7

  • 回答者： babu_baboo
  • 回答日時：

＞f&&func.call(that,flag);ってなにしてるの!?



if( f == true ) {
func( flag );// 引数funcが関数ならば、実行する
}
//と、似たり寄ったり。
//thatは、コールバックを利用したい時のため

var flag = true;

if( flag == true ) {
test();
}
は、
flag && test();
とも書けるよ

if( flag != true ) {
test();
}
なら
flag || test();
とも書けるよ

ほそくがないことを、だしにしてつっぱしってしまった。もうしわけない
    • good
    • 0
    • 件
通報する
この回答へのお礼

わざわざ解説ありがとうございます。
そう、その書き方も今回babu_babooさんのコードを見て知りました(@_@;)
やはり質問する側にも最低限の知識は必要ですね・・・orz

babu_babooさんのコードは難しいですが、調べて理解できるとタメになるのでありがたいです(^_^)
そういえば先ほどのコード、
　var f = 'function' === typeof func;
　f && func.call( that, flag );
この２つの謎が解けたらなんとか理解できました。
たった8行に半日使ってしまった・・・笑

大変勉強になりました！
ありがとうございますm(_ _)m

通報する
お礼日時：2010/04/14 17:41

No.5

  • 回答者： babu_baboo
  • 回答日時：

fujillinさんへ。

ぷちおねがい。
がっつりコードをかいてくださってありがとうございます。
とてもよいしげきになります。
もしよければ、onloadとかonclickとかではなく、ちがうものにしませんか？
それらは、かんたんにうわがきされると、きのうしなくなる。
へなちょこなコードしかかけませんが、じょうぶなコード、へんこうにつよいやつを
おたがいにせっさたくまして、かきませんか？

あぁ～これだけだと、さくじょたいしょうだな。
なので、ほそく。

var cont_pop0 = toggleSwitch( true, dispBlock( 'scon1' ) );
var cont_pop1 = toggleSwitch( false, dispBlock( 'scon2' ) );
のようにして、それぞれをよびだすとべつべつにきのうします。

ちょっと、はずいからさくじょでもいいや！
    • good
    • 0
    • 件
通報する
この回答へのお礼

下に同じです・・・・m(_ _)m

話の途中で申し訳ないですが解決という事で閉めさせていただきます。
　　e.style.display = ( flag = !flag ) ? 'block': 'none';
の考え方、とても参考になりました。
今度質問する時はbabu_babooさんのソースが読めるように勉強していきたいと思います。

ありがとうございました。

通報する
お礼日時：2010/04/14 13:50

No.4

  • 回答者： babu_baboo
  • 回答日時：

ならば、ねじってみました！ぼけつをほったかんがある？！



var toggleSwitch = function ( defState, func, that ) {
　defState = !!defState;
　var f = 'function' === typeof func;
　var result = function ( ) {
　　var flag = defState;
　　f && func.call( that, flag );
　　defState = !defState;
　　return flag;
　};

　return (result( defState ), result);
};


var dispBlock = function ( id ) {
　var e = document.getElementById( id );

　return e ? function ( flag ) {
　　e.style.display = flag ? 'block': 'none';
　}: false;
};


var cont_pop = toggleSwitch( true, dispBlock( 'scon1' ) );
    • good
    • 0
    • 件
通報する
この回答へのお礼

ちょっとレベル高くて私にはまだ早いようです(@_@;)
var f='function'===typeof func;ってなんで"="が3連結？
f&&func.call(that,flag);ってなにしてるの!?

と全ての行に対して言えてしまいそうなのでやめておきます・・・。
汎用性は無いにしても最初の方に出てきたコードが今の私には丁度良いようでした^^;
スマートなソースを書くにはもっと努力が必要ですね(>_<)

ありがとうございます。

通報する
お礼日時：2010/04/14 13:21

No.3

  • 回答者： fujillin
  • 回答日時：

＞ぐろーばるへんすうのflagもいまいちだけど


ちょいとひねってみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
body { background-color:#eeeeee; }
div.content{
background-color:#ffcc66;
width: 100px;
height: 20px;
}
</style>
<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById('cont1').onclick = (function() {
var flg = true;
return function() {
document.getElementById('scon1').style.display = (flg=!flg)?'block':'none';
}
})();
}
//-->
</script>
</head>
<body>
<div id="cont1" class="content">Content1</div>
↓これを表示/非表示させたい
<div class="subcontent" id="scon1">
SubContents
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

読み慣れない記述の解読に難航しております(>_<)

window.onload=(function(){...})();の部分がいまいちピンときません。
onload=の先、function()を囲んでいる()はeval()と同等という記述を見つけたのですが
文字列ではないfunction(){・・・}を()しないと動かないのは何故でしょうか？
あと、その後に再び()を付けるのもよくわかりません・・・。

通報する
お礼日時：2010/04/14 12:58

No.2

  • 回答者： babu_baboo
  • 回答日時：

こういうのは？


var flag = true;

function cont_pop( ) {
　var e = document.getElementById( 'scon1' );
　e.style.display = ( flag = !flag ) ? 'block': 'none';
}

でも、いか、いろいろ。
<body bgcolor=#EEEEEE>
とか、
width: 100;
height: 20;
とか、

<span>
が、いきなりとうじょう！（いんらいんようそが、いきなりは・・・）
とか

ぐろーばるへんすうのflagもいまいちだけどね^^;
    • good
    • 0
    • 件
通報する
この回答へのお礼

ソースコードが素人丸出しなのはごめんなさい(汗
これから勉強していきますm(_ _)m

>e.style.display = ( flag = !flag ) ? 'block': 'none';
参考になります、というか答えですよね^^;
条件文がその形で省略できる事も知りませんでした・・・。
直感的なコードしか書けない私にはとてもスマートに見えます。

ありがとうございました。

通報する
お礼日時：2010/04/14 10:36

No.1

  • 回答者： fujillin
  • 回答日時：

ぐぐってみれば、使い方の説明はたくさん見つかる



http://javascriptist.net/ref/element.style.visib …
http://www.nurs.or.jp/~sug/html/chap6/samp5.htm
http://allabout.co.jp/internet/javascript/closeu …
http://www.red.oit-net.jp/tatsuya/java/setumei2. …
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼遅れまして、すいません。

検索の仕方が下手だったんですね・・・。
styleとか部分的な情報は手に入ったのですが、
それらを繋ぎ合わせる知識が足りませんでしたm(_ _)m

とても参考になるリンクありがとうございます。

通報する
お礼日時：2010/04/14 10:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報