アコーディオンメニューのクッキーと開閉について

アコーディオンメニューでクッキーに記憶してその項目を開いたままにしてます。
それに加えて、メニューを開いたら他を閉じるコードを追加したのですが、
メニューを開くと、一瞬全てのメニューが開いてからクリックしたメニューが開いてしまいます。
これは何が原因なのでしょうか、、、？
あと、ページを更新すると全てのメニューが開いた状態になってしまうのも直したいです。。。

//開閉させるのコードは書いてある位置じゃないと動きませんでした、、、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<body>
<div class="aco-menu"> 
 <span>メニュー 1</span>
<ul id="child1">
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul id="child2">
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul id="child3">
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>
</div> 
 
 
 <script>
 $(function () {
  for (var i = 1; i <= $('ul').length; i++) {
    // クッキーがblockであれば読み込み時にメニューをオープンする 
    if ($.cookie('child' + i) == 'block') {
      $('#child' + i).show(); 
    }	
  }
  
  $('span').click(function() {
    var child = $(this).next('ul');

　　//開閉させる
    $(this).siblings('ul').slideToggle();
    $('span').not($(this)).siblings('ul').slideUp();

    // メニュー表示/非表示
    $(child).slideToggle('fast', function() {
      // 有効期限は1日（クッキーにはドメインをセットしない、ブラウザを閉じたら初期化）
      $.cookie($(child).attr('id'), $(child).css('display'), { expires: 1 });
    });
  });;
  
});
  </script>


</body>

.aco-menu {
	text-align:center;
	}
.aco-menu ul {
   display: none;
   list-style:none;
}

.aco-menu span {
  cursor: pointer;
  display:block;
 
 background:#F66;
	border:solid 1px #F06;
}

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

回答1件

ベストアンサー

$(this).siblings('ul').slideToggle();についてですが、これは「thisの兄弟であるul全てをスライド」という意味ですので、全てのアコーディオンが締まっている時にメニューをクリックすると、兄弟である全てのサブメニューが開くことになります。

child.slideToggle();がやりたかったことではないですか？

__あと、ページを更新すると全てのメニューが開いた状態になってしまうのも直したいです。。。 __

$(child).css('display')ですが、childにはクリックされたサブメニューが入っているので、常にblockです。
ですので、クッキーがnoneなど別の値になる状態がないです。

投稿2021/07/20 05:07

編集2021/07/20 05:14

Lhankor_Mhy

総合スコア36981

ayuayuayu

2021/07/20 05:32

ありがとうございます。child.slideToggle();　にしてみたところ他は開かなくなりました！ですが、クリックしたメニューが開いて→閉じて→開く　という状況です、、 $(child).css('display')　ですが　クッキーをnoneにしとかないといけないんですよね、、？理解が追い付かずすいません、、、