締切済み

アコーディオンメニュー開閉動作

2011/12/20 10:25

はじめまして。とある有料テンプレートを使用して会社のHPを作成しています。使用しているテンプレートにアコーディオンメニューが実装されているのですがその開閉動作について修正したいのですが、Java関連には疎いものでお聞きしたいです。使用させていただいているテンプレートは「フリー素材屋hoshino」さんの http://www.s-hoshino.com/web/high_002/index.html のテンプレートです。修正したい箇所は、アコーディオンメニューがページを移動するたびに閉じてしまう点です。アコーディオンメニューからカテゴリを選んでクリックし、その後移動したページではその部分のアコーディオンメニューを開いたままにしておきたいです。そうすることで、現在どのカテゴリーの、どの商品ページを見ているかもっとわかりやすくなりますし、同じカテゴリーのすぐ下のページにも移動しやすく(クリック回数が少なく)できると思います。多分、jQueryやcookie関連の修正が必要と思いますが、私の方でも、テンプレート配布元でもやり方がわからないので教えていただきたいです。わかりづらい文面で申し訳ありませんが宜しくお願いします。

pronagano
お礼率66% (2/3)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2011/12/20 20:22 回答No.3

内容はろくに見てませんが… ＞テンプレートのどのファイルのどの部分をどういじったらいいか・・・＞と言うような具体的な方法が知りたいのです。メニューの部分はscript.jsの中ほど、実質十行程度の部分です。その部分に、おしゃるようなクッキーの保存、読み込みを付け加えればよろしいかと思います。本来は、製作元に依頼して修正してもらうのが一番だと思いますが、基本的には、以下のようにすればよいのではないでしょうか。（検証していません） 1）初期設定で、クッキーを読込み　クッキーが存在したら、その内容にメニューをセット　存在しない時は、初期状態にメニューをセット 2）イベント処理の中でメニュー処理を終えたら、　その時の状態をクッキーに保存修正の方法は、ファイルをテキストエディタなどで開いて、直接編集するのが手っ取り早いかと。あるいは、その部分だけ別の（クッキー付きの）ものと取り替えるのも手かも。＜以下、ご参考まで＞ http://okwave.jp/qa/q3084680.html http://granshe.com/ex/accordion/ http://5509.me/log/control-slide-navigation-with-jquery-cookie

質問者

お礼 2011/12/21 10:41

回答ありがとうございます。jquery.cookie.jsというのを使うんでしょうか？それともscript.jsに何かを書き足すだけでよいのでしょうか？

edomin7777
ベストアンサー率40% (711/1750)

2011/12/20 14:25 回答No.2

＃１です。そういうのは、作成依頼って言うんだけど…。 ※ところで、「フリー素材屋」の有料テンプレート？自分で改変出来ないなら、諦めた方が良いよ？他人に「ただ」で依頼するには大きすぎるし…。 Ajaxについて調べて、自分で修正するしかありませんね。

edomin7777
ベストアンサー率40% (711/1750)

2011/12/20 11:29 回答No.1

移動させなきゃいいんじゃないの？ Ajax使って非同期でページ内容書き換えたら？ ※因みに、「Java関連には疎いもので」とありますが ※JavaとJavaScriptは別物です。 ※Javaで探していても欲しい回答は見つかりませんよ？

質問者

お礼 2011/12/20 13:31

早速のご回答ありがとうございます。 JavaとJavaScriptの違いもわからない素人です・・・テンプレートのどのファイルのどの部分をどういじったらいいか・・・と言うような具体的な方法が知りたいのです。

関連するQ&A

jQueryのアコーディオンメニュー開閉の制御
jQueryのアコーディオンメニュー開閉の制御以前はありがとございます。またまたアコーディオンメニューなのですが・・・ http://web.donnatokimo.com/jquery/517 こちらを使用して、クリックして飛ぶようにはなりましたが、開いているのが一番最初だけになってしまうので、コンテンツごとに開いた状態を制御したいです。まったく知識が無いので、できればやさしく詳しく説明していただけると助かります。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
jQueryのアコーディオンメニューデフォルトでの開閉
jQueryのアコーディオンメニューデフォルトでの開閉すでに掲載されている http://okwave.jp/qa/q5978950.html 「jQueryのアコーディオンメニュー　開閉の制御」では解決できませんでしたので質問です。アコーディオンメニューにおいて添付ファイルのように a.htmlを開いたら、1番上のアコーディオンが開いてる状態 b.htmlを開いたら、2番上のアコーディオンが開いてる状態 c.htmlを開いたら、3番上のアコーディオンが開いてる状態にしたいのですが、どうもうまくいきません。。。メニューが２つならできるのですが３つになるとさっぱりわからなくなります。特にアコーディオンを使うための.jsにこだわりはないのですが（開閉時にスムーズに動く事ができればどれでも構わないです）これが可能になるjsはどこかにないでしょうか？もしくは、どうすればこれが可能になりますでしょうか？どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
アコーディオンメニューの開閉制御
私webデザイナーをしています。アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。しかし、下記のコードでどうしても実装できません。技術のある方、間違いを教えていただけないでしょうか？【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- JavaScript
jqueryアコーディオンのマウスオーバー
http://triplexxx.jp/archives/150で制作しましたが、現在クリックでアコーディオンします。 jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉にしたいのですが、全く知識がありません。何処を修正したらいいか教えてください。
- ベストアンサー
- JavaScript
jQueryのアコーディオンメニュー　開閉の制御
jQueryのアコーディオンメニュー　開閉の制御こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして（http://triplexxx.jp/archives/150）アコーディオンメニューを設置しました。ページ遷移後でも、常に一番目のメニューが開いている状態なので、選択しているページのメニューだけを開いている状態にしたいのですがどの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが新しいコードを書ける知識がないので、教えてください。よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- javascript ---------------------- var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
jQuery アコーディオンメニューについて
jQuery アコーディオンメニューについていくつか質問させていただきます。当方、はじめてjQueryを使っています。以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a> <ul class="fxmn"> 　　　　 <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> 　</ul> </li> <li><a href="2" class="open">category2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">category3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン　　を開き、　　1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態　　　にしておきたいというものです。（↓こんな感じです） category1 ・　menu 1-1 ・　menu 1-2 ・　menu 1-3 ・・　menu1-3-1 ・・　menu1-3-2 ・・　menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide();　　で、　n　を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、　　可能でしょうか？　　（タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ　　ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす　　　るなど）変更するのは可能でしょうか？　　外部scriptが使えればと思っています。複数の質問になりましたが、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 JSはプログラムを組んだことがなく、悩んでおります。一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> ～以下省略します～そしてjavascriptのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ j$(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
jQueryを利用したアコーディオンメニュー
wordpress上でjQueryを使用したアコーディオンメニューを作成しようと思います。サイトの左カラムに設置して、ボックス化されたリストの一部をクリックするとメニューの開閉、テキストリンクの部分をクリックするとカテゴリのリンクに飛ぶように作成したいと考えております。アコーディオンの開閉までは作成できたのですが、そこからカテゴリへのリンクがうまく行きません。。 javascriptがあまり詳しくないので、ぜひともお力を貸してください。よろしくお願いします。  <script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li < a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script>   <ul class="acc"> <?php wp_list_categories('hide_empty=0&title_li='); ?> </ul> 
- ベストアンサー
- JavaScript
Jquery アコーディオンについて
知恵袋、Web初心者です。 Jquery / アコーディオンについて質問です。 Jqueryを使って２段のアコーディオンメニューを実装しているのですが、１つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。現在下記の様に記述しています。 ----------------------------------------- $(document).ready(function(){ $('.accordion').click(function() { $('.accordion').next().slideUp(); $(this).next().slideToggle(); }).next().hide(); }); ---------------------------------------- この記述ですと２段目のアコーディオンを押すと１段目も閉じてしまい、結果的に２段目も見えなくなってしまう、という状況です。２段目だけ機能させる事は可能でしょうか？？質問が分かりにくかったら申し訳ありません。初歩的な質問かも知れませんが、ご教授頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- JavaScript
jQuerey、アコーディオンメニューに関して
質問させて頂きます。 jQueryの知識が乏しいため、質問の内容がザックリとなってしまい申し訳ありませんが、ご存知の方は回答頂けると助かります。 jQueryにてアコーディオンメニューで検索すると、多くのプラグインが用意されています。今回もそういったプラグインを使用して、アコーディオンメニュー(のようなもの？)を作成したいと考えています。ですが、今回私が作成したいと考えているのは、ボタンをクリックした際に表示される領域が、最初から少しだけ表示されている状態にしておきたいと考えています。＜例＞ //1行目部分は最初から表示 ■■■■■■■■ 1行目 ---------------- ↓■部分をクリックすると、スライドして2行目と3行目も表示 ■■■■■■■■ 1行目 2行目 3行目 ---------------- 全て表示or全て隠れているといった形のアコーディオンプラグインであれば、検索してすぐに見つかるのですが、上記のような1行目のみ表示された状態といったことが出来るプラグインは見つけられずにいます。 jQueeryの知識も乏しく、自分で作成するということも厳しいので、そういったことの出来るプラグイン、または、方法など教えて頂ければ幸いです。質問の内容的に回答が難しいかもしれませんが、ご存じの方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- JavaScript

アコーディオンメニュー開閉動作