如何替换 .context jquery 已弃用?
How to replace .context jquery deprecated?
我遇到了菜单系统问题。我发现使用已弃用的 jQuery 上下文选择器可能有什么问题,但我无法理解这段代码并尝试修复它。
我看到 this thread 谈论它,但由于我不是 jQuery 用户,所以我没有设法使这个答案适应我的情况。任何帮助将不胜感激!
这是与我的问题相关的 jQuery 代码。该菜单旨在 open/close 子菜单、子子菜单、子子子菜单等
$(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;
}
您可以删除 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>
我遇到了菜单系统问题。我发现使用已弃用的 jQuery 上下文选择器可能有什么问题,但我无法理解这段代码并尝试修复它。
我看到 this thread 谈论它,但由于我不是 jQuery 用户,所以我没有设法使这个答案适应我的情况。任何帮助将不胜感激!
这是与我的问题相关的 jQuery 代码。该菜单旨在 open/close 子菜单、子子菜单、子子子菜单等
$(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;
}
您可以删除 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>