Javascriptで押すと開閉するメニューを作ろうと思い、下記のようなコードを書きました。

Question

muggy0812

10

8もっと見る

200pt

ウェブ制作

Javascriptで押すと開閉するメニューを作ろうと思い、下記のようなコードを書きました。

ところが、どんどん押していくうちに、押した所と違う内容が開いてしまいます。

-- 希望の動作 --
・メニューを押すとその真下に内容が表示され、もう一回同じメニューを押すと内容が非表示になる
・内容を表示した状態で、別のメニューを押すと、内容を自動で非表示にし、押したメニューの内容を表示する
・内容が表示されている状態で、なにもないところをクリックしたら、内容を閉じる

一番良い回答を下さった方のみに150P差し上げます。

はてなの文字数制限にひっかかるので別の場所にアップしたコード↓
http://1st.geocities.yahoo.co.jp/gl/barreko00/view/20110610

回答の条件

1人5回まで

登録：2011/06/10 14:09:38
終了：2011/06/11 12:02:28

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

Lhankor_Mhy8142322011/06/10 15:28:43

25pt

問題はココですね。

  if (active) {
    document.getElementById(active+'-btn').onclick=function(){show(active)};
    var activeElm = document.getElementById(active+'-menu');
    activeElm.style.display='none';
  }

このifが成立した時にonclickはどうなるかというと、

function(){show(active)}

です。

おそらく期待している動作は

function(){show('id1')}

などでしょうけれど、そうではないです。

ちなみに、hideの場合も

function(){show('id1')}

ではなく

function(){show(id)}

となっているのですが、こちらはクロージャがあるので大丈夫ですね。

正しく動作するコードが必要でしたら追記いたします。

追記：

document.getElementById(active+'-btn').onclick=function(){show(active)};

↑の部分を以下のように変更。

document.getElementById(active+'-btn').onclick=(
  function(active){
    return function(){show(active)}
  }
)(active);

一応、動作確認してます。ご想定の動作と違うようでしたらご指摘ください。

自分もアマグラマなので正確には説明できないのですが、JavaScriptの場合、functionごとにスコープがあるような感じです。

ですので、activeはグローバル変数として書き換えられてしまい正しく動作せず、idはfunctionの中での値を保持しているため正しく動作する、ということみたいです。

変更後のコードでは、引数として取らせてクロージャを作る感じでしょうか。

コードお願いできますか。

うーん。これは変数のスコープが良く理解できていないということなのか・・・

クロージャでちょっと調べてみたら、じっくり読まないと理解できなそうですね

2011/06/10 15:47:05

No.3

HowAreYou91172011/06/10 19:14:58

75pt

ご希望の動作か分かりませんが……

<body onclick="show(null)">

body 、あるいは希望の範囲を div 等でくくって onclick を仕込む。


function $stl(id) { return document.getElementById(id).style ; }

var active = '' ;
var mnClk = false ;

function show(id) {
  if (!id && mnClk) { mnClk = false ; return ; }
  if (active) $stl(active+'-menu').display = 'none' ;

  if (id != active) {
    $stl(id+'-menu').display = 'block' ;
    active = id ;
    mnClk = true ;
  }
  else active = '' ;
}

No.4

Cherenkov15044932011/06/11 08:33:54

25pt

jQueryで実装してみました。

onclick="show('id1')"のように要素毎に書くのは面倒だと思うので消しました。

表示/非表示はtoggle()に任せるのが楽です。

id1-btn、id1-menuのようにidで管理するのではなく、classとdivなどで階層を作ってボタンとメニューを管理すれば、要素を追加するだけで（id1～とも書かずに）すっきりと書けます。

demo: http://jsfiddle.net/L8JpD/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
//http://q.hatena.ne.jp/1307682576
$(function() {
  $('[id^="id"][id$="-btn"]').click(function() {
    var self = $(this);
    var ac = $('.active');
    if (ac.length) {
      if (ac.attr('id') !== self.attr('id')) {
        ac.trigger('click');
      }
    }
    $('#' + self.attr('id').replace(/btn$/, 'menu')).toggle(200);
    self.toggleClass('active');
  });

  $('body').click(function(e) {
    if ($(e.target).is('*:not([id^="id"][id$="-btn"]):not([id^="id"][id$="-menu"])')) {
      $('.active').trigger('click');
    }
  });
});
</script>
<style>
body {
  width: 2000px;
  height: 2000px;
}
.active {
  background-color: orange;
}
[id^="id"][id$="-menu"] {
  background-color: aliceblue;
}
</style>
</head>
<body>
<span id="id1-btn">[その1]</span><br />
<div id="id1-menu" style="display:none;cursor:pointer">--内容1--</div>
<span id="id2-btn">[その2]</span><br />
<div id="id2-menu" style="display:none;cursor:pointer">--内容2--</div>
<span id="id3-btn">[その3]</span><br />
<div id="id3-menu" style="display:none;cursor:pointer">--内容3--</div>
<span id="id4-btn">[その4]</span><br />
<div id="id4-menu" style="display:none;cursor:pointer">--内容4--</div>
</body>
</html>

参考までに jQuery UI - Accordion というのもあります。

質問の際にコードの断片を貼るのではなく、回答者がコピペですぐ確認できるコードのほうが、問題を共有しやすいですよ。

のようなサービスを積極的に利用しましょう。

あと回答者に対して、サンプルの提示を求めれば確認が楽になるかと。

参考になるアドバイスありがとうございます。

このデモに使っているサイトいいですね

言っておけばよかったのですが、現在prototype.jsを使っており

jqueryは競合が恐いので利用を避けています。

2011/06/11 11:58:32

muggy0812 2011/06/11 12:04:29

どの回答もよかったので非常に迷いましたが、いち早く
動作するコードを提示していただいたHowAreYouさんに
150Pとさせて頂きます。

質問に答えていただいた皆様、ありがとうございまいた。
Cherenkov 2011/06/11 12:34:00

prototype.jsならtoggleが使えるじゃないですか…
http://api.prototypejs.org/dom/Element/toggle/
muggy0812 2011/06/11 18:22:14

何分プログラムにうといもので、特にJavascriptは全然なんですね。
prototypeとjqueryの特徴もよくわかってなく、都度ググってサンプルを見つけこれでいいかな？
っていうスクリプトを真似て書いている、という手探り状態です

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

HowAreYou · Accepted Answer · 2011-06-10T15:39:17+09:00

同時に二つ開くことはないと判断しました。


function $stl(id) { return document.getElementById(id).style ; }

var active = '' ;

function show(id) {
  if (active) $stl(active+'-menu').display = 'none' ;

  if (id != active) {
    $stl(id+'-menu').display = 'block' ;
    active = id ;
  }
  else active = '' ;
}

何もないところをクリックはよく分からなかったので保留。

HowAreYou · Accepted Answer · 2011-06-10T15:39:17+09:00

同時に二つ開くことはないと判断しました。


function $stl(id) { return document.getElementById(id).style ; }

var active = '' ;

function show(id) {
  if (active) $stl(active+'-menu').display = 'none' ;

  if (id != active) {
    $stl(id+'-menu').display = 'block' ;
    active = id ;
  }
  else active = '' ;
}

何もないところをクリックはよく分からなかったので保留。

Javascriptで押すと開閉するメニューを作ろうと思い、下記のようなコードを書きました。

ベストアンサー

HowAreYou91172011/06/10 15:39:17

その他の回答（3件）

Lhankor_Mhy8142322011/06/10 15:28:43

HowAreYou91172011/06/10 15:39:17ここでベストアンサー

HowAreYou91172011/06/10 19:14:58

Cherenkov15044932011/06/11 08:33:54

コメント（3件)

この質問への反応（ブックマークコメント）