jQuery toggle() 戻るで開いたままに

締切済

質問者：dnsn
質問日時：2013/08/01 01:38
回答数：3件

【jQuery toggle() で要素を開いている状態で、その要素内のリンクから外部ページへ飛び
【戻る】ボタン（or BackSpace キー）で戻ったとき、その要素を開いたままの状態にしたい】

Webデザインサイドの人間で、javascript や jQuery の理解は不足しています。

上記のような動作を実現したいのですが、
ムシの良い話であることは重々承知致しております。

javascript jQuery にお詳しい方々、
可能でしたらそのまま使用可能なような【ソースの例示】にて、

実現方法をご教示頂けましたら大変幸いです。

＊もし早めにご教授頂けましたら、尚幸いです。

宜しくお願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： LancerVII
回答日時：2013/08/02 16:47

こんにちは。

>ただ、当該コードにて試してみた際に、
>.op-close クラスをクリックした際に、交互に開閉しない（「クリック度に何度も開き直すような動作」になる）
>などの状況がありました（当方の確認不足、記述の誤りであれば申し訳ございません）。

そりゃ、もともとどのような動作かわかってないのでお断りしたとおり、想像です。

- 0
- 件

通報する

No.2

回答者： LancerVII
回答日時：2013/08/02 08:29

こんにちは。

>無関係部分を全てカットして簡単に書けば、toggle 関連の記述は以下のようなものです。
>.op_close 要素をクリックすれば、その下にある hide していた op_close_block 要素が開閉するという簡単な仕組みです。
一番知りたかったのはタグの構成です。
jQueryを利用している場合はJavaScriptはもちろんのことHTMLのタグの構成が重要です。
タグの部分は想像でしか作れなかったので提示したソースは作成された環境に合わせてカスタマイズしてください。

・使用ライブラリ
jQuery 1.9.0、プラグインとしてjquery.cookie.js

スクロールはあまり検証していませんので調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery toggle() 戻るで開いたままに</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script src="jquery.cookie.js"></script>
<script>
$().ready ( function() {
// クッキーから選択されたindex値を取得する
var openIndex = $.cookie('openindex');
// op-close-blockのオブジェクト
var $opCloseBlock = $('div.op-close-block');
// 全て閉じる
$opCloseBlock.hide();
// クッキーよりopenindexの値が取得出来た場合は
// 対象となるop-close-blockを表示する
if ( openIndex ) {
var $target = $opCloseBlock.eq(openIndex).show();
// スクロールする
$('html,body').animate({scrollTop:$target.offset().top},'slow');
}

$('div.op-close').click ( function() {
// 一度全て非表示
$opCloseBlock.hide();
// 次の要素を表示
var nextObj = $(this).next('.op-close-block').slideToggle('normal');
// 選択された要素のindex値をクッキーにセット
var index = $opCloseBlock.index(nextObj);
$.cookie ( 'openindex', index );
});
$('button').click ( function() {
$.cookie ( 'openindex', null );
});
});
</script>
<style>
div.op-close {
width: 100px;
height: 400px;
background-color: #fcc;
border-bottom: solid 1px #fff;
cursor: pointer;
}
div.op-close-block {
width: 100px;
}
</style>
</head>
<body>
<header>
<h1>jQuery toggle() 戻るで開いたままに</h1>
</header>
<div class="op-close">Block1</div>
<div class="op-close-block">
<p><a href="block1.html">Block1-1</a></p>
<p><a href="block1.html">Block1-2</a></p>
</div>
<div class="op-close">Block2</div>
<div class="op-close-block">
<p><a href="block2.html">Block2-1</a></p>
<p><a href="block2.html">Block2-2</a></p>
<p><a href="block2.html">Block2-3</a></p>
</div>
<div class="op-close">Block3</div>
<div class="op-close-block">
<p><a href="block3.html">Block3-1</a></p>
</div>
<footer>
<button>クッキークリア</button>
</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

LancerVII 様、

コードをご教示頂き誠にありがとうございます。

ただ、当該コードにて試してみた際に、

.op-close クラスをクリックした際に、交互に開閉しない（「クリック度に何度も開き直すような動作」になる）

などの状況がありました（当方の確認不足、記述の誤りであれば申し訳ございません）。

http://detail.chiebukuro.yahoo.co.jp/qa/question …

のご教示にて、完全に希望の動作が実現できました。

お忙しい中、お教え頂き誠にありがとうございました。

通報する

お礼日時：2013/08/02 15:57

No.1

回答者： LancerVII
回答日時：2013/08/01 09:24

こんにちは。

現在どのように実装しているかわからない為
>可能でしたらそのまま使用可能なような【ソースの例示】にて、
は無理です。

どのようなタグの構成になっているかわかりません。

方法としてはリンクを選択した際、Cookieにどのリンクを選択したか書き込んで、戻ってきた際はCookieに存在する値を利用して最初に開いておく要素を選択します。

この回答への補足

LancerVII 様、コメントありがとうございます。

説明不足申し訳ございません。

無関係部分を全てカットして簡単に書けば、toggle 関連の記述は以下のようなものです。

.op_close 要素をクリックすれば、その下にある hide していた op_close_block 要素が開閉するという簡単な仕組みです。

$(function(){

$(".op_close_block").hide();

$(".op_close").click(function(){
$(this).next(".op_close_block").slideToggle("normal");
});

})

> リンクを選択した際、Cookieにどのリンクを選択したか書き込んで、戻ってきた際はCookieに存在する値を利用して最初に開いておく要素を選択

については

.op_close_block 要素の中には多くのリンクメニューがあるので、

仮に、今回ご質問のこのページを index.html とすれば、

・index.html（このページ）を当該訪問者が既に訪問していれば、

・開いている.op_close_block 要素内のリンクから外部ページに移動し、【戻る】ボタン等で戻ったときは「開いている状態」で index.html に戻る

ということを、上記の jQuery 内でも、index.html 内のインラインjavascript でも良いので、記述を加えて実現したい、という希望です。

勿論理想は、

・Toggle がなければ、【戻る】ボタンで戻ったときには「その前にクリックしたまさにそのリンク部分」に飛んで前画面が表示されるように、【直前に押したリンクの部分】に「開いた状態」でそのまま戻るのが良いのですが、

悪くても「.op_close_block 要素が開いた状態」でページの最上部に戻る、ということは実現できれば幸いです。

【Cookie の利用】や「開いていれば」という【フラグ】の立て方などが、どう書けばシンプルで効率的かなどが、普段自分で書いていないので分かりません。

現状況下、都合でいろいろ調べて理解する時間がありません。

丸投げでは「自分で調べろ」ということになるかもしれませんが、
お力をお借りできれば大変嬉しい状況です。

もしお手を差しのべて頂けるならば、皆さま宜しくお願い致します。