I am facing an issue with a menu system. I found out what was possibly wrong with using a deprecated jQuery context selector, but it's impossible for me to understand this code and trying to fix it.

I have seen this thread talking about it, but as I am not a jQuery user I didn't manage to adapt this answer to my case. Any help would be appreciated!

Here is the jQuery code related to my issue. The menu is intended to open/close a sub-menu, sub-sub-menu, sub-sub-sub-menu etc.

$(document).ready(function() {
  $('i.idi').click(function(e) {
    event.stopPropagation();    
    var submenu2 = $(e.target).closest('ul').children('ul li ul.sub-menu');
    var sub = submenu2.context.nextElementSibling;
    var submenu = $(e.target).closest('li').children('ul.sub-menu');
    
    for (let i = 0; i < submenu.length; i  ) {
      if (sub.classList.contains("hidden")) {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }
        sub.classList.remove("hidden");
        sub.classList.add("block");
      } else {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }

        sub.classList.remove("block");
        sub.classList.add("hidden");
      }
    }
  });
});

Here is the html code

    <nav>
        <ul>
              <li>
                  <a href="">
                      <i class="material-icons idi">home</i>
                  </a>
              </li>
                  <li>
                      <a href="" class="mparent">
                          Default
                      </a>
                      <i class="material-icons idi">keyboard_arrow_down</i>
                      <ul class="sub-menu hidden">
                          <li><a href="">
                                  test subcat
                              </a>                      
                          </li>
                      </ul> 
            </li>
        </ul>
    </nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

 <nav>
    <ul>
       <li>
          <a href="">
              <i class="material-icons idi">home</i>
          </a>
       </li>
       <li>
           <a href="" class="mparent">
              Default
           </a>
           <i class="material-icons idi">keyboard_arrow_down</i>
             <ul class="sub-menu hidden">
                 <li><a href="">
                              test subcat
                      </a>                      
                </li>
            </ul> 
        </li>
    </ul>
</nav>

Here is the css code that can be used.

.sub-menu.hidden {
    display: none;
}
.sub-menu.block {
    display: block;
}

CodePudding user response：

You can remove the red-herring that is submenu2 and use:

var sub = $(e.target)[0].nextElementSibling;

Code, html as provided and js with the above adjustment, using jquery 3.3.1 (latest for a snippet):

$(document).ready(function() {
  $('i.idi').click(function(e) {
    event.stopPropagation();
    var sub = $(e.target)[0].nextElementSibling;
    var submenu = $(e.target).closest('li').children('ul.sub-menu');

    for (let i = 0; i < submenu.length; i  ) {
      if (sub.classList.contains("hidden")) {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }
        sub.classList.remove("hidden");
        sub.classList.add("block");
      } else {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }

        sub.classList.remove("block");
        sub.classList.add("hidden");
      }
    }
  });
});

.sub-menu.hidden {
  display: none;
}

.sub-menu.block {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="">
        <i class="material-icons idi">home</i>
      </a>
    </li>
    <li>
      <a href="" class="mparent">Default</a>
      <i class="material-icons idi">keyboard_arrow_down</i>
      <ul class="sub-menu hidden">
        <li><a href="">test subcat</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>