こんにちは。デザイナーなんですが、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で質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onmouseoverの表示切り替えが上...
-
javascriptで教えてください。 ...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
【短い】1つだけ展開/表示/非表...
-
jQueryのeqで最後からn番目以降...
-
jqueryのsortableで一部ソート...
-
【jQuery】遅延実行(タイムラ...
-
JavaScriptで、?マークとコロ...
-
質問に答えていくと、回答によ...
-
JqueryFileTree.js でフォルダ...
-
Jqueryでリストのスクロール
-
Jquery の slide.toggle で要素...
-
jQueryのhide,showで中の要素が...
-
JS <a></a>タグ内のリンク先ア...
-
jquery ドロップダウンメニュー...
-
javascript INNERHTMLについて
-
javascriptで、クリックしたら...
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報