jQueryのアコーディオンメニュー 開閉の制御

質問

jQueryのアコーディオンメニュー 開閉の制御

以前はありがとございます。
またまたアコーディオンメニューなのですが・・・
http://web.donnatokimo.com/jquery/517
こちらを使用して、クリックして飛ぶようにはなりましたが、
開いているのが一番最初だけになってしまうので、コンテンツごとに開いた状態を制御したいです。

まったく知識が無いので、できればやさしく詳しく説明していただけると助かります。

どうかよろしくお願いします。

回答No.3

mikemike7 · ベストアンサー

No1、No2です。
JavaScript部分が提示されたもの全てだとして、
以下の記載のものに差し替えればご希望の挙動になると思います。

var j$ = jQuery;

j$(function(){
var menuck = "";
if(document.cookie){
var ckarr = document.cookie.split("; ");
for( var i = 0; i < ckarr.length; i++ ){
if(ckarr[i].indexOf('menuOpen=') === 0 && ckarr[i].length > 9){
menuck = ckarr[i].substr(9,ckarr[i].length);
break;
}
}
}
function setBackground() {
var $last = j$(".acc > li:last > a");
if($last.hasClass("close")){
$last.css("background-position", "left bottom");
} else{
$last.css("background-position", "left -30px");
}
}

j$(".acc").each(function(){
j$("li > ul" , this).wrap("<div></div>");
j$("li > div:not(:last)", this).append("<div class='notlast'>&nbsp;</div>");
j$("li > div:last" , this).append("<div class='last'>&nbsp;</div>");

j$("a.open", this).each(function(index){
if((menuck == "" && index > 0) || (menuck != "" && menuck != index)){
j$(this).addClass("close").next().hide();
} else{
j$(this).css("background-position", "left top");
}
setBackground();

var prms = {height:"toggle", opacity:"toggle"};
j$(this).click(function(){
var indexcnt = j$("a.open").index(this);
if(j$(this).hasClass("close")){
document.cookie="menuOpen="+indexcnt+"; path=/; expires=Tue, 31-Dec-2030 23:59:59;";
} else{
document.cookie="menuOpen=; path=/; expires=Tue, 1-Jan-1980 00:00:00;";
}
j$(this).toggleClass("close").next().animate(prms, {duration:"fast"})
.parent().siblings().children("div:visible").animate(prms, {duration:"fast"}).prev().addClass("close");
setBackground();
return false;
});
});
});
});

お礼

凄いです。本当にありがとうございました。
私に知識が無くすいません。
お忙しいところ教えていただき、助かりました。

回答No.2

mikemike7

No1です。

>？？分かりません・・・
見るところが違ってますよ＾＾；
ANo.3の回答がお望みの仕様です。

実際のHTMLソースも一切書かれていないので、
アドバイスのしようもありません。

補足

上のサイトとまったく同じソースです。
jsファイルはこれになります。

var j$ = jQuery;

j$(function(){

function setBackground() {
var $last = j$(".acc > li:last > a");
if($last.hasClass("close"))
$last.css("background-position", "left bottom");
else
$last.css("background-position", "left -30px");
}

j$(".acc").each(function(){
j$("li > ul" , this).wrap("<div></div>");
j$("li > div:not(:last)", this).append("<div class='notlast'>&nbsp;</div>");
j$("li > div:last" , this).append("<div class='last'>&nbsp;</div>");

j$("a.open", this).each(function(index){
var $this = j$(this);

if(index > 0)
$this.addClass("close").next().hide();
else
$this.css("background-position", "left top");

setBackground();

var prms = {height:"toggle", opacity:"toggle"};
$this.click(function(){
j$(this).toggleClass("close").next().animate(prms, {duration:"fast"})
.parent().siblings().children("div:visible").animate(prms, {duration:"fast"}).prev().addClass("close");
setBackground();
return false;
});
});
});
});

回答No.1

mikemike7

以前に似たような質問に回答したことがあります。
http://okwave.jp/qa/q6797636.html
参考になりましたら。

補足

ありがとうございます。
やはり初心者のので・・・・よく分かりません。

CSSのメニュー部分の指定を全て抜き出し
css/menu.css
などで保存し、各ページのHTML上で呼び出します。
<link rel="stylesheet" href="css/menu.css" type="text/css">
などのように。

同じように、メニュー部分のJavaScriptも抜き出し
js/menu.js
などで保存し、各ページのHTML上で呼び出します。
<script type="text/javascript" src="/js/menu.js"></script>

？？分かりません・・・