フレームメニューでリンク先を展開して表示させる

質問

はじめて投稿します。よろしくお願いします。

フレームページで、左にメニュー、右にコンテンツです。

右コンテンツ内はtoggleで項目ごとに展開・折りたたみの設定をしており
初期値はdisplay:none;を指定しています。

左メニューのリンクをクリックすると、右コンテンツの該当箇所に移動して
中身を展開して表示させたいです。

＜左メニュー(menu.html)＞
<ul>
<li><a href="a.html#title1" target="right"></li>
<li><a href="b.html#title2" target="right"></li>
・
・
・
</ul>

＜右コンテンツ(a.html)＞

<script>
$(function(){
$("#list li div:nth-child(1)").addClass("title");
$("#list li div:nth-child(2)").addClass("content");
$(".title").click(function(){
$(this).next().toggle(300);
});
});
</script>

<ul id="list">
<li>
<div id="title">
<p>
<h4>
<a name="title1">
タイトル1</a>
</h4>
</p>
</div>
<div id ="content" style="display:none;">
<p>
あああああああああああああああああああああああ
</p>
</div>
</li>
</ul>

javascriptなのかjqueryなのか、CSS3でもできるのか・・
なるべく簡単な方法がいいのですが
知識が乏しく、色々と試しましたが結果が出ずに悩んでいます。
アドバイスいただけないでしょうか。

回答No.9

Ogre7077 · ベストアンサー

No.6 の補足
> 展開されないことがあります。

こういうことでしょうか?

左の #title1 リンクを押す → 展開
右の #title1 見出しを押す → 閉じる
左の #title1 リンクを押す → 展開されない

ならば

function open(hash) {
$(hash).parent('li').find('.content').show(300);
location.hash = '#opened'; //【追加】
}

お礼

書き込みありがとうございます！
できました！
何度も親切に教えていただき感謝です。
勉強になりました。

回答No.8

ORUKA1951

そうそう
:tergetをIE8以前で
＞　⇒レッド ■ ワン: red-one: CSS3： Target 擬似クラスを実装するスクリプト sfTarget.js を（勝手に）作り直し( http://redone-on.blogspot.jp/2008/06/css3-target-sftargetjs.html )

お礼

引き続き、情報を下さり感謝です。
ありがとうございます！！

回答No.7

ORUKA1951

そうそう、HTML本体を
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section" id="SECTION1">
＿＿＿<h3><a href="#SECTION1">１項見出し</a></h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION2">
＿＿＿<h3><a href="#SCTION2">２項見出し</a></h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION3">
＿＿＿<h3><a href="#SECTION3">３項見出し</a></h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION4">
＿＿＿<h3><a href="#SECTION4">４項見出し</a></h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="#SECTION1">１項</a></li>
＿＿＿＿<li><a href="#SECTION2">２項</a></li>
＿＿＿＿<li><a href="#SECTION3">３項</a></li>
＿＿＿＿<li><a href="#SECTION4">４項</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
のほうが使いやすいですね。タイトルクリックで広がります。

お礼

お返事遅れてすみません！
書き込みありがとうございます！
使いやすくなりました。

回答No.6

Ogre7077

No.5 ですが、少々誤解があるようなので、ちゃんと書いてみました。
ie8 とのことですので <script> が少々泥臭いです。すみません。

-- menu.html

そのまま

-- a.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script src="https://raw.githubusercontent.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>

<script>$(function(){
function open(hash) { $(hash).parent('li').find('.content').show(300) }
if (location && location.hash) open(location.hash);
$(window).hashchange(function(){if (location && location.hash) open(location.hash);});
$('#list li h4').click(function(){$(this).parents('ul#list li').find('.content').toggle(300);});
})</script>
<style>
#list li .content { display:none; }
</style>

<ul id="list">
<li>
<h4 id="title1">タイトル1</h4>
<div class="content"><p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ</div>
<li>
<h4 id="title2">タイトル2</h4>
<div class="content"><p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い</div>
<li>
<h4 id="title3">タイトル3</h4>
<div class="content"><p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う</div>
</ul>

お礼

サンプルソースありがとうございます！
とてもわかりやすくてありがたいです。。

早速試してみたのですが、最初にクリックしたリンクは
開くのですが、2回目からが開かないのです。。

1回目・タイトル1クリック→開く
2回目・タイトル2クリック→開かない

ページをリロードして
1回目・タイトル2クリック→開く
2回目・タイトル1クリック→開かない

・・といった具合なのです。

そのまま持ってきて試したのですが
私がどこか不足しているところがあるのか、見直している最中です。
あと少しなのにもどかしいです・・
Ogre7077様の環境では動作されているのですよね・・

補足

色々試し、下に書いた現象は回避されるようになりました！
早とちりで書き込みすみません。
スムーズに動くようになったところで、ページを何度か切り替えてテストしていたのですが、3～4回に1度くらいの頻度で
展開されないことがあります。
他のメニューをクリックして、再度もどると今度は展開されていたりします。
度々で恐縮なのですが、この現象について
回避方法など、アドバイスいただけないでしょうか。

回答No.5

ORUKA1951

あれじゃ印刷したら惨めなことになるので・・
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{width:100%;height:100%;}
h1,h2,h3,h4,h5,h6,p{margin:0;}
p{text-indent:1em;}
-->
＿</style>
＿<style type="text/css" media="print">
<!--
h1,h2,h3,h4,h5,h6,p{line-height:1.8em;}
div.section div.nav{display:none;}
-->
＿</style>
＿<style type="text/css" media="screen">
<!--
body{position:relative;}
h1,h2,h3,h4,h5,h6,p{line-height:1.6em;}
h3{height:30px;}
h2,h3{z-index:10;position:relative;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{position:fixed;top:0;left:0;height:100px;border-bottom:ridge 3px gray;background-color:white;z-index:20;}
div.section{position:relative;top:110px;}
div.section div.nav{position:fixed;left:0;top:110px;width:200px;height:100%;border-right:ridge 3px gray;}
div.section h2,div.section p{margin-left:210px;}
div.section div.section{width:auto;min-width:0;margin:0 0 0 210px;padding:0;position:static;overflow:hidden;height:30px;}
div.section div.section p{margin:0 1em;}
div.section h2{height:40px;}
div.footer>*{margin-left:210px;position:relative;top:120px;}
div.section div.section:target{height:300px;min-height:300px;margin-top:-150px;padding-top:150px;}
div.section div.section+div.section:target{margin-top:-180px;padding-top:180px;}
div.section div.section+div.section+div.section:target{margin-top:-210px;padding-top:210px;}
div.section div.section+div.section+div.section+div.section:target{margin-top:-240px;padding-top:240px;}
div.section div.nav a:active{background-color:red;}
div.section h2{background-color:white;}
#SECTION1{background-color:rgb(200,255,255);}
#SECTION1 h3{background-color:aqua;}
#SECTION2{background-color:rgb(255,200,255);}
#SECTION2 h3{background-color:fuchsia;}
#SECTION3{background-color:rgb(225,255,200);}
#SECTION3 h3{background-color:lime;}
#SECTION4{background-color:rgb(255,255,200);}
#SECTION4 h3{background-color:yellow;}
div.section div.section h3 a{display:block;width:100%;height:100%;text-decoration:none;color:black;}
-->
＿</style>

お礼

ご丁寧にありがとうございます！
みやすくなりました。
社内ではフレーム好きな担当者が多いので
今後も活用できそうです。

回答No.4

ORUKA1951

ちょっと時間が取れたのでサンプル
★CSS3の:target擬似クラス使ってますので、古いブラウザにも使うならjavascriptでも
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みHTML4.01strict + CSS3(:targetのみ)
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{width:100%;height:100%;position:relative;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
h3{height:30px;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{position:fixed;top:0;left:0;height:100px;border-bottom:ridge 3px gray;background-color:white;z-index:10;}
div.section{position:relative;top:110px;}
div.section div.nav{position:fixed;left:0;top:110px;width:200px;height:100%;border-right:ridge 3px gray;}
div.section h2,div.section p{margin-left:210px;}
div.section div.section{width:auto;min-width:0;margin:0 0 0 210px;padding:0;position:static;overflow:hidden;height:30px;}
div.section div.section p{margin:0 1em;}
div.section h2{height:40px;}
div.footer>*{margin-left:210px;position:relative;top:120px;}
div.section div.section:target{height:300px;min-height:300px;margin-top:-150px;padding-top:150px;}
div.section div.section+div.section:target{margin-top:-180px;padding-top:180px;}
div.section div.section+div.section+div.section:target{margin-top:-210px;padding-top:210px;}
div.section div.section+div.section+div.section+div.section:target{margin-top:-240px;padding-top:240px;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section" id="SECTION1">
＿＿＿<h3>１項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION2">
＿＿＿<h3>２項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION3">
＿＿＿<h3>３項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="SECTION4">
＿＿＿<h3>４項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="#SECTION1">１項</a></li>
＿＿＿＿<li><a href="#SECTION2">２項</a></li>
＿＿＿＿<li><a href="#SECTION3">３項</a></li>
＿＿＿＿<li><a href="#SECTION4">４項</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

お礼

書き込みありがとうございます！
1ページでこんな表示ができるなんて、知らなかったです！
びっくりしました。
勉強になります。。
対象ブラウザバージョンが古くてie8なので
javascriptを探してみます。

回答No.3

Ogre7077

menu.html でリンクを押すと、a.html 内で load または hashchange のイベントが発生します。
ここで URL 内に hash の値が有るならば、対応する中身を展開する、でいかがでしょうか

// a.html

$(window).on('load hashchange', function(){
if (location && location.hash) 展開(location.hash);
});

// 動作イメージ

a.html が表示される
→ イベント load が発生
→ hash が無いので、なにもしない

menu.html で、リンク a.html#title1 が押される
→ イベント hashchange が発生
→ hash == "#title" なので、展開("#title1") が実行される

menu.html で、リンク b.html が押される
→ menu.html で、リンク a.html#title1 が押される
→ イベント load が発生
→ hash == "#title" なので、展開("#title1") が実行される

hashchange は古いブラウザで動かない問題がありますが、
その場合は以下の jQuery プラグインを併用してください
http://benalman.com/projects/jquery-hashchange-plugin/

お礼

書き込みありがとうございます！
展開、とあるのはリンク元のメニュー名ですよね。
それが複数ある場合（メニュー1、メニュー2・・）は
その数分記述すればいいのでしょうか。

回答No.2

tracer

フレームを使うなと頭ごなしに言うつもりはありませんし、フレームを使ってもご所望のことはできますが、明らかに難易度が高くなります。実装方法は、JavaScriptを使って異なるフレームと通信することになります。つまり、javascriptをご存じない方が選択する方法ではありません。

フレームを使わずにページを作れるのであれば、あるいは、CSSだけで目的を達成できるようになるかもしれません。

お礼

書き込みをありがとうございます。
このサイトは社員閲覧用ページで、依頼者からフレーム指定で
きているので変更ができないのです。。

フレームを死守したいのであれば、実装にはハードルが高そうだということですね。
フレームを使わずにCSSだけで目的達成できるかも、とは
ターゲット疑似クラスのことでしょうか。

回答No.1

ORUKA1951

そもそもフレームは使うべきではありません。
1999年(15年前)のHTML4.01の勧告以来、frameは非推奨です
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」
ですし、フレームには様々な問題があります。
HTML フレーム 問題( https://www.google.co.jp/search?q=HTML%20%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%20%E5%95%8F%E9%A1%8C&hl=ja )
「JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。ggogle-ウェブマスター向けガイドライン( https://support.google.com/webmasters/answer/35769?hl=ja#2 )」

　それでももフレームはここでも、一年に数回は話題として登場していますね。

　とにかくHTMLは単純に文書構造だけを記述します。
　そのうえで、スタイルシートで実現しましょう。
★最も率直な方法は、それぞれの内容を記したHTMLを作成し、共通なメニューからそれぞれのページにリンクさせること。
　断然有利で分かりやすい方法です。最もベストな方法です。（面倒臭いだけ）
　　リンク先のタイトルもきちんと書いてあれば、それぞれのページが検索エンジンにもわかりますし
　　利用者がブックマークしてもきちんとブックマークできる。
　　共通なメニューはスタイルシートで各ページでデザインします。
　　ページ数が多い場合は、SSIなどを使用してincludeするか、ページ自体をサーバー側で出力させる。

★コンテンツの量が少ないときは率直にスタイルシートで実装しても良いでしょう。
　実に様々な方法があります。

　いずれにしろ、まずどのようにプレゼンテーションするかは忘れて、きちんとHTMLを書きましょう。

お礼

書き込みをありがとうございます。
情報が不足してすみません。
このページは社内閲覧用でして、外部に出すことはないサイトになります。
依頼者（社員）がフレームが好みのためこの作りになっていて、変更はできないので、やりたいことの実現は難しそうですね。。
ありがとうございます。