バーガーメニューを閉じた時、中のアコーディオンも閉じる

Question

前提・実現したいこと

はじめまして。

現在meanmenuというレスポンシブ対応のドロワーメニューを使用しています。
うぇぶもようさんのサイト（https://webmoyou.com/web/703/）を参考にさせていただきました。

ドロワーの中にドロップダウン（アコーディオン）がありますが、ドロップダウンを開いたままクローズボタン（meanmenu-reveal）をクリックしたら、次にドロワーオープンしたときに閉じていて欲しいです。（現状は開けたままクローズすると次もドロップダウンは開いたままです。）

該当のソースコード

	$(function() {
		//メニューの表示状態保管用
		var state = false;
		//.bodyのスクロール位置
		var scrollpos = 0;
		//meanmenuの状態による表示制御
		function mm_control() {
			if($('.mean-nav .nav').is(':visible')) {
				//表示中
				if(state == false) {
					scrollpos = $(window).scrollTop();
					$('body').addClass('fixed').css({'top': -scrollpos});
					$('.mean-container').addClass('open');
					$('.mean-nav .mask').show();
					state = true;
				}
			} else {
				//非表示中
				if(state == true) {
					$('body').removeClass('fixed').css({'top': 0});
					window.scrollTo( 0 , scrollpos );
					$('.mean-container').removeClass('open');
					$('.mean-nav .mask').hide();					
					state = false;
				}
			}
		}

		$('#gNav').meanmenu({
			meanMenuContainer: "#header .h_nav", // メニューを表示させる位置
			meanScreenWidth: "768"
		});
		
		$(document)
		.on('opend.meanmenu closed.meanmenu', function() {
			mm_control();
		})
		.on('touchend click', '.mean-bar .mask', function(e) {
			$('.mean-bar .meanmenu-reveal').trigger('click');
			return false;
		});
		
		//ウィンドウサイズ変更によるメニュー非表示時の制御
		$(window).on('resize', function() {
			mm_control();
		});
	});

試したこと

//非表示中
if(state == true) {
  $('body').removeClass('fixed').css({'top': 0});
  window.scrollTo( 0 , scrollpos );
  $('.mean-container').removeClass('open');
  //追加した箇所
  $(".mean-expand").toggleClass("mean-clicked",false).text('+');
  $('.sub-menu').css('display','none');
  //追加した箇所終了
  $('.mean-nav .mask').hide();					
  state = false;
}

上記2行を追加しましたが、これだとPCにリサイズした際のドロップダウンは非表示になってしまいます・・・。

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){}
で上記を囲ったりもしてみましたが、うまくいきません。

また、表示をかえるだけでは無理なのかもしれないと思ったので

//非表示中
if(state == true) {
  $('body').removeClass('fixed').css({'top': 0});
  window.scrollTo( 0 , scrollpos );
  $('.mean-container').removeClass('open');
  //追加した箇所
$(".mean-expand").trigger('click');
  //追加した箇所終了
  $('.mean-nav .mask').hide();					
  state = false;
}

上記も試してみましたが、なぜかクローズしたときにトップへスムーススクロールしてしまい、うまくいきませんでした。（スムーススクロールの動きもサイトにあります。）

スキル不足で恐縮ではございますが、ご教授いただけますと幸いです。

Answer 1

初めに貼ってあるソースコードの //表示中 までを下記のようにすることでおｋだと思います。
私は素人ですので、どこかに不具合が出てる可能性もあります。アロー関数を使ってるので
IE11では動かないのでそこはjqueryにするなり書き換えることで対応してください。

		$(function ($) {
			//メニューの表示状態保管用
			var state = false;
			//.bodyのスクロール位置
			var scrollpos = 0;
			//meanmenuの状態による表示制御
			function mm_control() {
				if ($('.mean-nav .nav').is(':visible')) {

					const closeAccordion = (elm) => {
						elm.addEventListener("click", () => {
							const closeElm = document.getElementsByClassName("mean-expand");
							for (let i = 0; i < 2; i++) {
								if (closeElm[i].classList.contains("mean-clicked")) {
									closeElm[i].click();
								}
							}
						});
					}

					const mask = document.getElementsByClassName("mask")[0];
					const closeBtn = document.getElementsByClassName("meanclose")[0];

					closeAccordion(mask);
					closeAccordion(closeBtn);

					//表示中

Comments

[momoko_888]

Jon_do様

ご回答いただきありがとうございます！ご教授いただいたソースで無事希望の動きが実装できました；：
本当にありがとうございます！

[momoko_888]

MEMO：
希望の動きは実装できたのですが、クローズボタンを押すとTOPまで戻るという現象が発生しておりました。原因は、スムーススクロールのJSが競合を起こしていました。

Jon_do様からご教授いただいたソースはそのままに、スムーススクロールのJSの方に$('a[href^="#"]:not(.mean-expand)').click(function(){〜略
を追記しました。（.mean-expandもaタグなので、競合したのかもしれない？）