![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。
現在のサイドメニューは、以下のようになっています。
●米
●果物
○いちご ←初期状態は”display: none”、「果物」クリックで展開
●野菜
○トマト ←初期状態は”display: none”、「野菜」クリックで展開
●味噌
この小要素を、以下のように増やしたいのです。
●果物
○いちご
○りんご
以下、数は可変
現在の該当部分のソースは、
【HTML】
<ul id="menu">
<li><a href="kome.html">米</a></li>
<li><a href="#" onclick="kudamonoshow();">果物</a></li>
<li id="line1" style="display: none;"><a href="kudamono01.html"> いちご</a></li>
<li><a href="#" onclick="yasaishow();">野菜</a></li>
<li id="line2" style="display: none;"><a href="yasai01.html"> トマト</a></li>
<li><a href="miso.html">味噌</a></li>
</ul>
【JS】
function kudamonoshow()
{
if (document.getElementById('line1').style.display == 'none')
document.getElementById('line1').style.display='block';
else
document.getElementById('line1').style.display='none';
}
function yasaishow()
{
if (document.getElementById('line2').style.display == 'none')
document.getElementById('line2').style.display='block';
else
document.getElementById('line2').style.display='none';
}
このソースで何が起きているかは理解しましたが、項目の増やし方が分かりません。
IDはページに一つということなので、試しにHTMLを
<li><a href="#" onclick="kudamonoshow();">果物</a></li>
<div id="line1" style="display: none;">
<li><a href="kudamono01.html"> いちご</a></li>
<li><a href="kudamono02.html"> りんご</a></li>
</div>
と、隠したい部分に強引にdivを使いIDを指定したところ、FireFox(Win&Mac)およびSafari(Mac)では正常に動作しますがIE7では動作せず、常に全てのリストが表示されている状態になり、レイアウトも崩れてしまいます。
(IE6は現在手元にありません)
IEでも動作させるにはどうしたらいいのでしょうか?
リストタグを使わない疑似プルダウンのソースは見つけましたが、このサイトでは他にもプログラムが色々動いているので、できれば変更は最小限にしたいと考えています。
足りない情報がありましたら追加します。よろしくお願いします。
No.1ベストアンサー
- 回答日時:
divじゃなくspanでやったらどんなかんじ?
IE7でも理論的には合っているみたいだけど何か記述間違えしてたりしないかな?
それと、CSS上でline1の位置調整とかがどうなってるか見てみた方が良いかも。
早速のご回答ありがとうございます!
divをspanに変えてみたところ、正常に表示されるようになりました。
spanだと引っかからない記述ミス等が他の場所にあるのかもしれません。
なぜdivだと動作しないのかは分かりませんが、今後の課題にしたいと思います。
本当に助かりました。ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【JQuery】アコーディオンの入...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
【jQuery】遅延実行(タイムラ...
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
[jQuery]bxSlider 一番最後と...
-
iframe内のリンク文字のマウス...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報