CHAKOIRO'S WEB DESIGN | 大阪府堺市のフリーランスWEB制作 > blog > html・CSS・jQuery・JS備忘 > アコーディオンメニューに別ページからアンカーリンクで飛んだ時に開いた状態にする

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

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

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

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

アコーディオンっぽいメニューを簡単に実装（自分以外のアコーディオンは閉じる）

Contents

1 HTML
2 CSS
3 JS
4 DEMO

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クラスを与えて開かせなさい。

と言う感じです。

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