There is one function in x.js that is interfering with my navigation menu:
function c() {
const t = document.querySelector(".desktop .x-nav");
if (!t) return;
const e = t => t.matches(".desktop .x-nav li") ? t : t.closest(".desktop .x-nav li"),
i = t => t && t.matches("li.menu-item-has-children");
function s(t) {
const e = t && t.closest(".sub-menu, .x-nav");
e && [...e.querySelectorAll(".x-active")].forEach(t => t.classList.remove("x-active"))
}
function o(t) {
t && (s(t), i(t) && t.classList.add("x-active"))
}
let n = !0;
function r({
target: i
}) {
const r = e(i);
r ? (n = r, o(r)) : n && (n = !1, s(t))
}
document.body.addEventListener("focusin", r);
const a = n => {
const r = e(n.target);
i(r) && (n.preventDefault(), n.stopPropagation(), o(r)), r || s(t)
};
document.body.addEventListener("touchstart", a, {
passive: !1
}), document.body.addEventListener("click", a, {
passive: !1
});
const c = function(t) {
let e = !1;
return document.body.addEventListener("touchstart", (function i() {
e = !0, "function" == typeof t && t(), document.body.removeEventListener(i, {
passive: !0,
capture: !0
})
}), {
passive: !0,
capture: !0
}), () => e
}(() => document.body.removeEventListener("focusin", r));
let d;
[...t.querySelectorAll("li")].forEach(n => {
l()(n, ({
target: t
}) => {
if (c()) return;
const n = e(t);
clearTimeout(d), i(n) ? o(n) : d = setTimeout(() => s(n), 350), document.body.removeEventListener("touchstart", a, {
passive: !1
}), document.body.removeEventListener("click", a, {
passive: !1
})
}, ({
relatedTarget: i,
toElement: o
}) => {
if (c()) return;
const n = i || o;
if (!t.contains(n)) return clearTimeout(d), void(d = setTimeout(() => s(t), 750));
const r = e(n);
r && (clearTimeout(d), d = setTimeout(() => s(r), 350))
})
})
}
What is the proper procedure for this scenario?
Do I put a copy of x.js in my child theme with this code commented out, or do I add something to my child theme’s functions.php, or…?