javascriptで、クリックしたらメニューが閉じるようにしたいです

javascriptで、クリックしたらメニューが閉じるようにしたいです。

one two three ...

と 横並びのメニューがあってそこをクリックするとプルダウンでメニューが
出てくるようなものをJavaScriptで作っています。

そこで、その横並びのメニュー・プルダウンで出てきたメニュー以外のところをクリックすると、
メニューが閉じるようにしたいと思っています。
どうやったらそのようにできるでしょうか。

ちなみにhtml, cssの概要は以下のとおりです(one, twoのプルダウンは省略)
//html-----------
<ul id="menu">
<li>one</li>
<li>two</li>
<li>
three
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>


//css----------
#menu li ul{
display: none
}

No.3 ベストアンサー 回答者： fujillin 回答日時： 2010/09/27 10:37

＞横並びのメニューがあってそこをクリックするとプルダウンで

＞メニューが出てくるようなものをJavaScriptで作っています。
できているところまでを提示しないと、何がわからないのかわかりません。
（表示するのはできていると解釈）


とりあえず、簡単な方法としては
　1）どこかクリックされたら全部閉じる
　2）クリックされたところを開く
という考え方でできると思いますが？
（3個くらいのメニューの開閉ならこれで充分かと）

大量にあるものを対象とする場合は
　1）開いているところを記録しておいて
　2）クリックされたところが1）と同じなら何もしない
　3）現在開いているところを閉じ、クリックされたところを開く
　4）記録を更新
とか？

スクリプトオフのユーザを考慮するなら、最初からCSSでdisplay:noneにしておくよりも、スクリプトで非表示にするほうが親切かと…

No.2 回答者： yuu_x 回答日時： 2010/09/26 15:13

どうせ話しても理解しようともしないでしょ。

ライブラリがゴロゴロあるんだから、その程度のプログラミングレベルなら、ライブラリ使ったほうが無難。

No.1 回答者： yuu_x 回答日時： 2010/09/25 17:44

.menu li ul {

display : none;
}
.menu li:hover ul {
display : block;
}

<ul class="menu">
<li>one
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li>two
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li>three
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>

この回答へのお礼

回答ありがとうございます。

この方法でやると、ドロップダウンメニューは作れるのですが、
質問に書いたようなものはできませんでした。

他の方法を探してみようと思います。

お礼日時：2010/09/26 10:26