jquery - 如何替换已弃用的 .context jquery？

Question

我遇到菜单系统问题。我发现使用已弃用的 jQuery 上下文选择器可能存在问题，但我不可能理解这段代码并尝试修复它。

我见过this thread谈论它，但由于我不是 jQuery 用户，我没有设法使这个答案适应我的情况。任何帮助将不胜感激!

这是与我的问题相关的 jQuery 代码。该菜单用于打开/关闭子菜单、子子菜单、子子子菜单等。

$(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");
      }
    }
  });
});

这是html代码

    <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>

 <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>

这是可以使用的CSS代码。

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

Answer 1

您可以删除 submenu2 中的红鲱鱼并使用:

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

代码，提供的html和经过上述调整的js，使用jquery 3.3.1(最新的代码片段):

$(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>