アコーディオンメニュー 開いてある要素をクリックしても閉じない

Question

クッキーを使ってページ移行した時、開いたままにするアコーディオンメニューを作っています。
この時に開いてあるところをクリックしたら閉じてまた開いてしまいます。
とれを開いてる所をクリックしたら閉じるようにしたいのですけどうまく行きません、、、
この場合、クッキー部分のif文をかえないとダメでしょうか？

jquery-cookieを利用しています。

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

    });
  });;
  
});
  </script>

Comments

[yambejp]

jquery-cookieを利用している前提でよろしいですか？

[ayuayuayu]

はい！そうです！

Answer 1

jquery-cookieはsameSite属性の設定ができないので非推奨かもしれません。
js.cookie.jsが公開されているのでそちらをご利用ください

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script>
$(function () {
  self=$(this);
  $('.aco-menu > ul').hide().filter('#'+Cookies.get('visible')).show();
  $('.aco-menu > span').on('click',function() {
    $(this).next('ul').slideToggle().queue(function(){
      Cookies.set('visible',$(this).is(':visible')?$(this).attr('id'):'none',{sameSite:"lax"});
      $(this).dequeue();
    }).siblings('ul').filter(function(){
      return !$(this).prev('span').is(self) && $(this).is(':visible');
    }).slideUp();
    setTimeout(()=>console.log(document.cookie),1000);
  });
});
  </script>
<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> 

Comments

[ayuayuayu]

すごい、、、
完璧です！ありがとうございます！！
書いてあるコードを理解できるように一つずつ勉強します！！