アコーディオンメニューで、開いたサブメニューをタップした時に、閉じてしまう。

困っていること

やりたいこと

開いたサブメニューをタップしても、該当のページに遷移するだけで、閉じないようにしたい。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<style>
  @media print, screen and (max-width: 750px) {
    .sp-nav-inner .footer-nav li a {
      margin-left: 0;
    }
  }
  ul.footer-nav li {
    border-bottom: 1px solid #ccc;
  }

  ul.footer-nav li a {
    margin-left: 16px;
    color: white;
  }

  .sp-nav-inner ul.footer-nav li a {
    color: #2a2a2a;
  }


  .sub-menu {
    overflow: hidden;
  }

  @media print, screen and (max-width: 750px) {
    .sub-menu li {
      background: #ccc;
    }
  }

  .sub-menu li a {
    display: block;
    margin-bottom: 14px;
    margin-top: 14px;
  }

  @media print, screen and (max-width: 750px) {
    .sub-menu li {
      padding-left: 1em;
      border-top: 1px solid;
    }
  }
  
</style>


<div class="sp-nav">
  <div class="sp-nav-inner">

    <ul class="footer-nav">
      <li>
        <a href="#">
          あいうえお
        </a>
      </li>
      <li class="accordion">
        <a>かきくけこ</a>
        <ul class="sub-menu">
          <li>
            <a href="#">
              SERVICE
            </a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</div>
<script>

/* アコーディオン メニュー フッター メニュー*/
var $navbarLinkDropdown = Array.prototype.slice.call(document.querySelectorAll('.footer-nav > li'), 0);
// ドロップダウンアイコンが存在する場合
if ($navbarLinkDropdown.length > 0) {

	// ドロップダウンアイコン要素のクリックイベント
	$navbarLinkDropdown.forEach( function($el) {
		// 属性初期化
		let $ul = $el.querySelector('ul');
		let h = 0;
		let s = 0;
		if($ul) {
			h = $ul.querySelectorAll('li').length * 49;
			// s = $ul.querySelectorAll('li').length * 0.1;
			s = 0.4;

			$ul.style.transition = 'all '+ s +'s ease-in';
			$ul.dataset.height = h;
		}
		$el.addEventListener('click', function() {
			let $ul = $el.querySelector('ul');
			// ドロップダウンメニュー
			$el.classList.toggle('is-hidden');
			if($ul) {
				if ($el.classList.contains('is-hidden')) {
					$ul.style.height = '0px';
				}else{
					$ul.style.height = $ul.dataset.height + 'px';
				}
			}

		});
		// 最初は折りたたむ
		$el.click();
	});
}
</script>
</body>
</html>

jsに詳しくない事と、急ぎの為、
半日以上、調べましたがjqueryが必要なものしかなく、
アドバイスを頂けると幸いです。

yambejp

2019/05/16 10:42

遷移したら前のページのアコーディオンが開いてても閉ってても関係ないのでは？

Tatsurou

2019/05/17 06:32

ご質問、ご指摘ありがとうございます。ユーザビリティ的に閉じると遷移しないと感じる方も多い気がする為、質問させていただきました。

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

回答3件

イベントのバブリングを停止する方法があります。
例えばですが、下記のようにすると、
li要素以下で起こったイベントが上位に伝わらなくなり、アコーディオンされなくなります。

html
1          <li class="accordion-child">
2            <a href="#">
3              SERVICE
4            </a>
5          </li>

Javascript
1$('.accordion-child').bind("click",function(event){
2	//親要素への伝達を止める。
3	event.stopPropagation();
4});

投稿2019/05/16 13:18

mar-kn

総合スコア306

Tatsurou

2019/05/17 06:34

ご回答いただきありがとうございます。僕のソースの場合、以下のような追記になるかと思うのですが、いろんな所に追記を試しましたが、お恥ずかしながら、思ったように動作してくれませんでした。すでにあるjsのどこに追記すれば良いかご教授頂けると幸いです。 $('.sub-menu').bind("click",function(event){ //親要素への伝達を止める。 event.stopPropagation(); });

mar-kn

2019/05/17 07:04 編集

x_xさんがJavascript部分のみ手を加えれば動くソースを提示してくださっていますので、お時間が無いようでしたらそちらを利用された方が良いと思います。

Tatsurou

2019/05/17 07:18

承知しました。先ほど、再現ができたので、x xさんの手法を参考にさせていただきます。アドバイスいただきありがとうございます。

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

ベストアンサー

JavaScript
1        // 最初は折りたたむ
2        $el.click();
3
4        // 追加
5        $el.querySelectorAll('a[href]').forEach(function(a) {
6            a.addEventListener('click', function(event) {
7                event.stopPropagation();
8            }, { passive: true });
9        });

投稿2019/05/17 06:38

x_x

総合スコア13749

Tatsurou

2019/05/17 07:19

x_xさん　ご教授いただきありがとうございます。無事、対応する事ができました。大変、助かりました。今後とも、よろしくお願いいたします。

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

一応チェックボックスと絡めるとcssでできます

CSS
1<style>
2#u1 > li > ul{display:none}
3#u1 > li input:checked + ul{display:block}
4#u1 [type=checkbox]{display:none}
5
6</style>
7<ul id="u1">
8  <li><a href="#">あいうえお</a></li>
9  <li><label for="l1">かきくけこ</label>
10    <input type="checkbox" id="l1">
11    <ul>
12      <li><a href="#">さしすせそ</a></li>
13      <li><a href="#">たちつてと</a></li>
14  </ul>
15  </li>
16</ul>