サブメニューの表示非表示の切り替え

Question

https://www.kojimalaw.jp/

このサイトのパソコン版の表示の右上にあるメニューのように、サブメニューが表示されるようにしたいです。上のサイトでは、ホバーしたらサブメニューが表示されますが、僕はクリックしたら表れるように実装したいです。

<div class="container">
    <ul id="header">
      <li><a id="profileLogoName"></a></li>
      <li><a href="" id="memberLogo"></a></li>
      <li><a href="" id="symbolLogo"></a></li>
      <li><a href="" id="systemLogo"></a></li>
      <li><a href="" id="othersLogo"></a></li>
    </ul>

  <!-- サブメニュー -->
    <aside>
      <ul>
        <li><a href=""><span id="arrow">→ </span>CONCEPT</a></li>
        <li><a href="">ACTIVITY</a></li>
        <li><a href="">HISTORY</a></li>
        <li><a href="">MAIL</a></li>
      </ul>
    </aside>
</div>
  <!-- サブメニュー -->

var wholePage = document.body;
var profile = document.getElementById('profileLogoName');
var sideMenu = document.getElementsByTagName('aside');
var confirm = true;

    profile.addEventListener('click', function() {
      sideMenu[0].style.display = "inline-block";
      confirm = false;
    });
    wholePage.addEventListener('click', function() {
      if(confirm = true) {return;}
      sideMenu[0].style.display = "none";
      confirm = true;
    });

headeridのulタグがメニュー、asideタグがサブメニューです。

asideタグにはCSSにて、最初はdisplay: none;を設定しています。profileLogoNameidが付いたaタグを押すとdisplay: inline-block;に変わり、asideタグ以外の部分を押すとdisplay: none;に変わるというように実装されるのが理想です。

サブメニューを表示させるのはうまくいきました。しかし、消すのがうまくいきません。メニューバーの要素をクリックするとサブメニューが消えるのですが、それ以外の部分を押しても消えません。

wholePage変数にcontainerクラスの要素を取得するように書いてみてもうまくいきませんでした。

ご教授お願いします。

Answer 1

こちらを参考にしたらできました。

Answer 2

containerとasideの相関関係がわからないのでなんとも言えませんが
カスタムdataで親idを指定すればよいかも

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.container aside'),function(x){
    x.style.display='none';
  });
  [].forEach.call(document.querySelectorAll('#header a[id]'),function(x){
    x.addEventListener('click',function(e){
      e.preventDefault();
      (st=document.querySelector('[data-target="'+x.id+'"]').style).display=st.display=="inline"?"none":"inline";
    });
  });
});
</script>
<div class="container">
    <ul id="header">
      <li><a href="#" id="profileLogoName">a</a></li>
      <li><a href="#" id="memberLogo">b</a></li>
      <li><a href="#" id="symbolLogo">c</a></li>
      <li><a href="#" id="systemLogo">d</a></li>
      <li><a href="#" id="othersLogo">e</a></li>
    </ul>
    <aside data-target="profileLogoName">
      <ul>
        <li><a href=""><span id="arrow">→ </span>CONCEPT</a></li>
        <li><a href="">ACTIVITY</a></li>
        <li><a href="">HISTORY</a></li>
        <li><a href="">MAIL</a></li>
      </ul>
    </aside>
</div>

Answer 3

    wholePage.addEventListener('click', 
     // function() {
//      if(confirm = true) {return;}
//      sideMenu[0].style.display = "none";
//      confirm = true;
      function(e) {
          if(confirm === true && sideMenu[0].contains(e.target) === false) {
              sideMenu[0].style.display = "none";
              confirm = true;
          }
    });

これでいけるか試してみてください。：D

Comments

[ryoo_chksl]

コピペしてみましたができませんでした。

質問文のコードはかなり省略してしまいました。お伝えした方がいい部分がありましたら送ります。