如何替换.context jquery弃用?

Question

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

我已经看到这个线程谈论它，但因为我不是一个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>