Предыдущий CSS это немного длинновато, поэтому я дам объяснение.
Когда вы используете это
$(document).on('click', 'ul li', ...
Вы выбираете любой li элемент, который является сыном, внуком или так далее, из любого элемента ul. Такой селектор следует использовать с умом, иначе вы можете закончить выбор того, что вам не нужно.
Итак, сначала попробуйте изменить его на
$(document).on('click', 'ul>li', ...
Чтобы выбрать только li элементы, которые являются прямыми дочерними элементами ul элементов.
Затем убедитесь, что ваши CSS правила нацелены на li элементы с «активным» классом для применения вашего правила, и это должно сработать.
Изменить: если это единственное, где вы используете Jquery, вы можете попробовать это вместо Jquery, чтобы сэкономить некоторую пропускную способность при загрузке страницы:
let prev = null;
let items = document.querySelectorAll("ul>li");
items.forEach((el)=> el.addEventListener("click", ()=>{
el.classList.add("active");
if(prev) prev.classList.remove("active");
prev = el;
});
Надеюсь, это поможет.