マンガでよめる痔のこと・薬のこと

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
}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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


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


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

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

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

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



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

.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>
    • good
    • 0
この回答へのお礼

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

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

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

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

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


人気Q&Aランキング