【jQuery】特定のクラスを持ったアコーディオンを開いたままにしたいです

html
1<nav>
2	<ul>
3		<li class="ac_box">
4                    <p class="ac_toggle">
5                        クリックして開く
6                    </p>
7                    <div class="ac_content">
8                        <ul>
9                            <li><a  href=“リンク先”>リスト1</a></li>
10                            <li><a  href=“リンク先”>リスト2</a></li>
11                        </ul>
12                    </div>
13                </li>
14		<li class="ac_box">
15                    <p class="ac_toggle">
16                        クリックして開く
17                    </p>
18                    <div class="ac_content">
19                        <ul>
20                            <li><a  href=“リンク先”>リスト1</a></li>
21                            <li><a  href=“リンク先”>リスト2</a></li>
22                        </ul>
23                    </div>
24                </li>
25	<ul>
26</nav>
27
28<style>
29.current {
30	color:red;
31}
32.ac_content {
33	display:none;
34}
35</style>
36

jQuery
1/*クリックして開閉*/
2$(function(){
3  $('.ac_toggle').on("click", function() {
4    $(this).next().slideToggle();
5  });
6});
7
8// ナビゲーションメニューの色を変える
9$(function(){
10  var url = location.origin + location.pathname + location.search;
11    $('nav li a').each(function(){
12        var $href = $(this).prop('href');
13        if (url === $href) {
14            $(this).parents('.ac_box,li').addClass('current');
15        }
16    });
17});
18
19/*アコーディオン開いたまま*/
20$(function(){
21    $('nav .ac_box').each(function(){
22        if ($('nav .ac_box').hasClass('current')) {
23          $(this).children('.ac_toggle').next().slideToggle();
24        }
25    });
26

上記で、.currentクラスを付与された.ac_boxの.ac_contentを開いたままにしたいです。
「//アコーディオン開いたまま」のscriptが動作しません。
リロード時や、ページ遷移の際にも開いた状態が保持されている動きにしたいです。

よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

CSSで指定しておく形ではダメでしょうか？

HTML
1<li class="ac_box current">
2  <p class="ac_toggle">
3    クリックして開く
4  </p>
5  <div class="ac_content">
6    <ul>
7      <li><a  href=“リンク先”>リスト1</a></li>
8      <li><a  href=“リンク先”>リスト2</a></li>
9    </ul>
10  </div>
11</li>

CSS
1.current {
2  color:red;
3}
4.ac_content {
5  display:none;
6}
7.ac_box.current .ac_content{
8  display: block;
9}

付与されたとのことですが、例えばクリックイベントなどでjsで動的に付与したクラスはCookieやsessionStorageなどで情報を記録しておかないとリロード時には消えてしまいます。

投稿2022/04/06 12:32

kinchannel

総合スコア111

yc-www10

2022/04/07 01:09

CSSだけで可能でした！ありがとうございました！

行動規範の内容に同意します

/*アコーディオン開いたまま*/のコード、閉じるカッコが足りていないようですが、動作してない原因になっていたりしないでしょうか。

机上のコードで動作確認しておりませんが、もしかしてこういうコードを書きたいのでしょうか？

JavaScript
1/*アコーディオン開いたまま*/
2$(function(){
3  $('nav .ac_box').each( function(el){
4    if (el.hasClass('current')) {
5      el.children('.ac_toggle').next().slideToggle();
6    }
7  });
8}