- 締切済み
jQuery toggle() 戻るで開いたままに
【jQuery toggle() で要素を開いている状態で、その要素内のリンクから外部ページへ飛び 【戻る】ボタン（or BackSpace キー）で戻ったとき、その要素を開いたままの状態にしたい】 Webデザインサイドの人間で、javascript や jQuery の理解は不足しています。 上記のような動作を実現したいのですが、 ムシの良い話であることは重々承知致しております。 javascript jQuery にお詳しい方々、 可能でしたらそのまま使用可能なような 【ソースの例示】 にて、 実現方法をご教示頂けましたら大変幸いです。 ＊ もし早めにご教授頂けましたら、尚幸いです。 宜しくお願い申し上げます。
- dnsn
- お礼率50% (16/32)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- LancerVII
- ベストアンサー率51% (1060/2054)
- LancerVII
- ベストアンサー率51% (1060/2054)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 現在どのように実装しているかわからない為 >可能でしたらそのまま使用可能なような 【ソースの例示】 にて、 は無理です。 どのようなタグの構成になっているかわかりません。 方法としてはリンクを選択した際、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 の利用】や「開いていれば」という【フラグ】の立て方などが、どう書けばシンプルで効率的かなどが、普段自分で書いていないので分かりません。 現状況下、都合でいろいろ調べて理解する時間がありません。 丸投げでは「自分で調べろ」ということになるかもしれませんが、 お力をお借りできれば大変嬉しい状況です。 もしお手を差しのべて頂けるならば、皆さま宜しくお願い致します。
関連するQ&A
- jQueryを用いたドラッグ＆ドロップについて
jQueryを用いてドラッグ＆ドロップによって要素を移動できるプログラムを書いています。 draggableとdroppableによって「要素を移動しました」とメッセージを表示させる事は出来ましたが、ドロップした所へ要素をcloneでコピーし、appendで追加するとその要素はドラッグ出来ません。 その原因として、javascriptが読み込まれた後に生成された要素に対してjavascriptが機能しないからだと思っています。 目的としましては、 １．要素をドラッグ＆ドロップで移動可能とし、 ２．ドロップされた所へ要素を挿入し、 ３．ドロップされた順番に整列を行い、 ４．また他の要素内へドラッグ可能 とした機能を実現したいと考えています。 特に３番目の「ドロップされた要素をドロップした要素内に整列を行う」箇所に重点をおいています。 アドバイス宜しくお願いします。
- ベストアンサー
- JavaScript
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- jQuery loadで要素差し替え
回答者の皆様にはいつも大変にお世話になっております。 jQueryのload命令で別のhtmlを読み、#content要素を差し替えたく思っています。 読み込むhtmlにも同idの#content要素があります。 $("#content").load("contents1.html #content"); ところが、これを行うと、どうも、 <div id="content"> <div id="content">新しく読み込んだ内容</div> 元々の内容</div> のように２重に生成されてるようなのです。 コード例は簡略化してありますが、実際にはJavaScriptコードなどが入ったややこしいもので、CSSも、Javascriptも複雑怪奇で手が出ません。 また、各htmlは事情があり、内容を編集できません（外部でjava生成）。 どうやって読みこんだら要素差し替えられますでしょうか？ お助けを！！
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み方法
JavaScript超初心者です。 何卒ご協力の程よろしくお願い致します！！ タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。 以下のページを参考にやってみましたが上手くいきません。 http://blog.sugulab.com/?p=14 やってみたのは下記のような作業です。 まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。 http://jquery.com/download/ 次に参照ページにならってhead要素内に下記のように記述しました。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!– $(function(){ $("#leftcontent").load("shopmenu.html"); }); // –> </script> body要素内には<div id="leftcontent"></div>と記述しています。 このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。 PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・ ド素人の為、見当違いのご質問でしたらご容赦ください。 どなたかご教示、アドバイスの程よろしくお願い申し上げます！！m(*u_u*)m
- ベストアンサー
- JavaScript
- Jqueryのjavascriptが読み込まれません
はじめまして。 Jqueryのsuperfishを使用したサイトを作っているのですが、javascriptファイルが読み込まれていないような状態になっています。 具体的には 1）ローカル環境では問題なく読み込まれている 2）サーバにアップすると、同階層の別ページ（A.htmlとします）では機能しているのに、特定のページ（B.html）では読み込まれていない ※A.htmlとB.htmlで同じ効果（superfishによるアコーディオンナビ実装）を得たい 3）A.htmlの<head>内javascriptに関する記述とB.html内同箇所の記述は全く同じ 4）B.html内の他の単独のjavascriptは問題なく読み込まれる という状況です。 この場合どのような原因が考えられるのでしょうか。 javascriptについては全くの初心者であり、どうにも解決できず、困っています。 ちなみに使用しているjqueryはjquery-1.2.6.min.jsです。 （大元であるA.htmlは違う方にコーディングしてもらい、そのデータを元にB.htmlをコーディングする作業をしています） jquery-1.2.6.min.jsもしくはsuperfish.js内に動かすhtmlへのパスが記載されているのかとも思いましたが、知識不足で該当の箇所が見つけられず…。 ご意見を頂ければ幸いです。 どうぞよろしくお願い致します。
- 締切済み
- JavaScript
- シャドウボックスとjQueryを共存させるには
シャドウボックス3.0.3を利用しています。 チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、 シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。 共存させるにはどのように記述を変えれば良いでしょうか？ <head> <script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script> <!-- シャドウボックス --> <script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script> <link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css"> <script type="text/javascript"> $(document).ready(function(){ Shadowbox.init(); }); </script> <!-- チェックボックスの複数選択 --> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $('.chkbox').attr('checked', $(this).attr('checked')); }); }); </script> </head> <body> <a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a> <div id="inline" style="display:none"> <input type="checkbox" id="toggle"> toggle<br> <br> <input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br> <input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br> <input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br> </div> </body>
- ベストアンサー
- JavaScript
- jquery select要素のdisplay:noneについて
jqueryを使用して、要素の表示・非表示をさせたいのですが、 下記、コードで問題が出ています。 <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".dis").toggle( function(){ $("table.displayArea").attr("style","display:block"); }, function(){ $("table.displayArea").attr("style","display:none"); } ); }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html> aタグをクリックするとselectフォームがちゃんと表示されるんですが、 再度クリックしてもselectフォームが非表示にされません。 試しに、フォームでなくただのテキスト文字にしてみると、 ちゃんと、表示・非表示がうまくいきます。 その他のフォーム要素も試してみたのですが、問題ありませんでした。 なのでselect要素だけちゃんと非表示されないようです。 何が原因なのかお分かりになる方がいらっしゃいましたら、 ご教授いただけると幸いです。
- ベストアンサー
- JavaScript
- jqueryで外部ファイル読み込んだ後の動作
jqueryで外部ファイル読み込んだ後、読み込んだ外部ファイルに記述されたIDに対しての操作をしたいんですが、うまく行きません。 ブラウザに読み込ませるHTML(main.html) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(function(){ $("#main").load("loadfile.html"); }); $("#str").html("50"); </script> </head> <body id="main"> </body> </html> #mainに読み込ませるHTML(loadfile.html) <html> <head> </head> <body> <p id="str">00</p> </body> </html> 自分なりの予想ではloadfile.htmlを読み込んだ後、 まだDOM要素が操作できない状態の時に$("#str").html("50"); が実行されてしまっていると思われますが、 こういう時は.ready()とかをうまく使うのでしょうか？ 基本がまだ身についていなく、 とんちんかんな質問かもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- JQuery UIで、表示したタブの中にアコーディオンを追加したい
こちらのページにあるようなタブをjQueryで作り、 http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm 出来上がったタブの中に、以下のページ http://allabout.co.jp/internet/javascript/closeup/CU20071215A/ にあるようなアコーディオンメニューを表示したいのですが、 タブの表示まではできるのですが、 アコーディオンメニューが追加できません。 実現へのヒント等、教えて頂ければ幸いです。
- ベストアンサー
- JavaScript
- jQueryの関数内の変数について教えてください
jQueryで外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「mLivre」を実行し、リサイズ処理をした時に もう一度「mLivre」を実行しております。 「var mLivre」内にある数値を、「jQuery(window).resize」の中の 「 jQuery.fn.mLivre」の中にある変数に代入しようと思っております。 私のやりたいことは、「mLivre」というプラグイン（下記※参考サイト）を レスポンシブにしたいと思っております。 「mLivre」は画像を本の様にめくってくれるスクリプトです。 下記のコードの流れで、ブラウザサイズに合わせて表示の大きさを 変えることができましたが、リサイズするごとに初期化され ページが１ページ目からになってしまうので、 リサイズ後も変わらないページで表示させたいと思っております。 ※参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 全くの初心者で大変恐縮しておりますが、 ご享受いただけたらと思います。 また、記述についてもご指摘いらだけたら幸いです。 宜しくお願いいたします。 -------ソースコード---------- //実行外部ファイル jQuery('#slide').mLivre({ }); //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 } jQuery.fn.mLivre = function(options,num) { //この中の変数に代入したい }; jQuery('#slide').mLivre({ //リサイズ後の実行部 }) ; }); })(jQuery); var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 }
- ベストアンサー
- JavaScript
お礼
LancerVII 様、 コードをご教示頂き誠にありがとうございます。 ただ、当該コードにて試してみた際に、 .op-close クラスをクリックした際に、交互に開閉しない（「クリック度に何度も開き直すような動作」になる） などの状況がありました（当方の確認不足、記述の誤りであれば申し訳ございません）。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13111131918 のご教示にて、完全に希望の動作が実現できました。 お忙しい中、お教え頂き誠にありがとうございました。