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 · ベストアンサー

＞横並びのメニューがあってそこをクリックするとプルダウンで
＞メニューが出てくるようなものをJavaScriptで作っています。
できているところまでを提示しないと、何がわからないのかわかりません。
（表示するのはできていると解釈）

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

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

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

回答No.2

yuu_x

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

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

回答No.1

yuu_x

.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>

お礼

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

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

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