大阪府堺市のWEB制作(ホームページ制作)事務所です

アコーディオンメニューに別ページからアンカーリンクで飛んだ時に開いた状態にする

最終更新日:2022.05.23 [月] 公開日:2020.04.23 [木] カテゴリー:html・CSS・jQuery・JS備忘

めっちゃタイトル長くなりました、なんて表現したらいいかわからず。
そのままの事例です。



この時の記事と同じアコーディオンの場合という前提で。

HTML


CSS

.child {
    display: none;
}

JS

	  
function slide_menu() {
$(".parent").not(this).removeClass("active").next().slideUp(200);
     $(this).toggleClass("active").next().slideToggle(200);
	
}
 

const anc = location.hash;
if (anc == "#test") {
$(anc).toggleClass("active").next().slideDown(200);
}
	


var anc = location.hash;
if (anc == “#test”) {
$(anc).toggleClass(“active”).next().slideDown(200);
}

が外から飛んできたアンカーリンクだと該当箇所を開かせる命令です。

const anc = location.hash;

#以降のアンカー部分をancに入れます。

if (anc == “#test”)

もし#testだったとしたら。。。

$(anc).toggleClass(“active”).next().slideDown(200);

activeクラスを与えて開かせなさい。

と言う感じです。

これが最良の書き方かは分からないのですが、、、とりあえずこれで動きます。

DEMO

でもは別ページにあります

DEMOはこちら


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA