こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。
作ろうとしているメニューは
メルシー3
├メルシー3の特徴
├メルシー3の仕組
├メルシー3の償還例
└お申込メモ/運用レポート
メルシー4
├メルシー4の特徴
├メルシー4の仕組
├メルシー4の償還例
└お申込メモ/運用レポート
。。というかんじで、メルシー3、4をクリックすると、
詳細メニュがツリーメニューで見れるというものです。
*問題は***
ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。
例えば、すべての項目が閉じている状態からはじめます。
メルシー3をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー4をクリックすると、今の状態ではメルシー3が開いたまま、メルシー4が開いてしまいます。
これをデフォルトで1つの項目しか開かないようにしたいのです。
スクリプトの現状は以下のようになっています。
<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css"> .tree { display: none; }<'+'/style>');
function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
parent.contents.open(id+".html","contents")
}
と定義して
<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー3</a><br></td>
</tr>
<td>
<div id="contents/mercy3" class="tree">
├<a href="#" target="contents">メルシー3の特徴 </a><br>
├<a href="未設定" target="contents">メルシー3の仕組 </a><br>
├<a href="未設定" target="contents">メルシー3の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>
<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー4</a><br></td>
</tr>
<tr>
<td>
<div id="contents/mercy4" class="tree">
├<a href="#" target="contents">メルシー4の特徴 </a><br>
├<a href="未設定" target="contents">メルシー4の仕組 </a><br>
├<a href="未設定" target="contents">メルシー4の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>
とボディーで記述しています。
どなたか、ご存知でしたら、よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
とりあえず3パターン書きますね
parent.contents.open(id+".html","contents")はよく分からなかったので省いていますm(--)m
【1】2つしかないのであればその2つを閉じて対象を開く
function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
document.getElementById("contents/mercy3").style.display="none";
document.getElementById("contents/mercy4").style.display="none";
document.getElementById(id).style.display="block";
}
}
【2】たくさんあってid名の数字だけが変わる
(i=《初めの数値》;i<《終わりの数値+1》;i++)に変更してください
function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
for(i=3;i<5;i++) {
document.getElementById("contents/mercy"+i+"").style.display="none";
}
document.getElementById(id).style.display="block";
}
}
【3】divを対象に閉じる
(i=《ページの先頭から数えてn個目-1》;i<《ページの先頭から数えてn個目》;i++)に変更してください
→1個目の<div>がi=0となります
function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else {
for(i=0;i<2;i++) {
document.getElementsByTagName("div")[i].style.display = "none";
}
document.getElementById(id).style.display="block";
}
}
No.1
- 回答日時:
微妙に突っ込みどころが多いので、勝手にだいぶいじりました。
処理事態はたとえばこんな感じで消しこみしれてやれば?
<style type="text/css">
#sub,#sub ul,#sub li{
list-style:none;
padding:0px;
margin:0px;
}
#sub .tree {
display: none;
}
</style>
<script type="text/javascript">
function treeView(id) {
var obj=document.getElementById(id);
obj.style.display=(obj.style.display!='block')?'block':'none';
var ulgroup=document.getElementsByTagName("ul");
for(var i=0;i<ulgroup.length;i++){
if(ulgroup[i].className=="tree" && ulgroup[i].id!=id) ulgroup[i].style.display='none';
}
}
</script>
<ul id="sub">
<li><a href="#" onClick="treeView('mercy1');" title="クリックでメニューが開閉します">メルシー1</a></li>
<ul id="mercy1" class="tree">
<li>├<a href="#" target="contents">メルシー1特徴 </a></li>
<li>├<a href="#" target="contents">メルシー1の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー1の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy2');" title="クリックでメニューが開閉します">メルシー2</a></li>
<ul id="mercy2" class="tree">
<li>├<a href="#" target="contents">メルシー2特徴 </a></li>
<li>├<a href="#" target="contents">メルシー2の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー2の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy3');" title="クリックでメニューが開閉します">メルシー3</a></li>
<ul id="mercy3" class="tree">
<li>├<a href="#" target="contents">メルシー3特徴 </a></li>
<li>├<a href="#" target="contents">メルシー3の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー3の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
<li><a href="#" onClick="treeView('mercy4');" title="クリックでメニューが開閉します">メルシー4<a></li>
<ul id="mercy4" class="tree">
<li>├<a href="#" target="contents">メルシー4特徴 </a></li>
<li>├<a href="#" target="contents">メルシー4の仕組 </a></li>
<li>├<a href="#" target="contents">メルシー4の償還例 </a></li>
<li>└<a href="#" target="contentss">お申込メモ/運用レポート</li>
</ul>
</ul>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「jQuery」アコーディオンメニ...
-
jquery 3の倍数のliだけ色を変える
-
スムーズスクロールとfleXcroll...
-
FireFoxのjavascriptでonloadで...
-
動画サイトのURLからswfを抜き...
-
JS外部ファイル
-
VideoBoxのカスタマイズ
-
画像が表示でnull; this.src
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
HPで写真をクリックすると次の...
-
jQueryを使ってランダムに表示
-
iframe内のリンクが飛ばないの...
-
JAVAスクリプトについて
-
MFCで画像を表示させているので...
-
フッター上部に謎の隙間
-
画像とコメントの同時表示をし...
-
dtで横並び
-
画像をクリックしたら別ウイン...
-
指定位置に要素を追加する
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
jQueryでネスト構造の<li>がク...
-
どの<li><a> が押されたか判別...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
【jQuery】遅延実行(タイムラ...
-
アコーディオン自動開閉メニュ...
-
jQueryで表示する吹き出しdivの...
-
JqueryFileTree.js でフォルダ...
-
タブ切り替えの初期表示に関して
おすすめ情報