Используйте jquery, чтобы выделить родителя, когда элемент дочернего меню активен, и оставить подменю открытым

Я новичок в jQuery и работаю над вертикальной навигацией по типу аккордеона, которая выделяет активную страницу и элемент родительского уровня, если он есть. У меня все работает так, как я хочу, за некоторыми исключениями. Однако я уверен, что должен быть способ объединить все функции в одну, я просто не уверен, как это сделать.

Большинство моих страниц находятся в папках, в которых есть основная страница по умолчанию, а затем другие страницы. Итак, если бы у меня было about в моем меню и у него было подменю, подменю было бы открыто, а about было бы выделено активным классом. Затем, если вы нажмете на страницу в папке «О программе», about останется выделенным, и элемент подменю также будет выделен. И вы сможете иметь ссылки на родительский уровень и по-прежнему переключать подменю.

Вот пример страницы

У меня также есть скрипка, но вы не можете видеть все функции

Вот проблемы, которые я хотел бы исправить:

1. Когда вы попадаете на главную страницу, ничего не выделяется, пока вы не нажмете на элемент.

2. При наведении курсора на ссылку родительского уровня со стрелкой стрелка остается темной, а не белой. Не удалось выяснить класс css для этого.

3. При нажатии на ссылку родительского уровня, которая имеет подменю, подменю остается открытым. Но если вы закрываете меню стрелкой, стрелка остается в нижнем положении, а не вправо.

Эта функция выполняет добавление независимого элемента переключения

jQuery(document).ready(function($){
    $(function() {  
        // Add a <span> to every .nav-item that has a <ul> inside
        $('#vmenuList li').has('ul').prepend('<span class="nav-click"><i class="icon"></i></span>');
        // Dynamic binding to on 'click'
        $('#vmenuList').on('click', '.nav-click', function(){
            // Toggle the nested nav
            $(this).siblings('.submenu').slideToggle('slow');
            // Toggle the arrow using CSS3 transforms
            $(this).children('.icon').toggleClass('nav-open');
        });
    });
});

Это соответствует URL-адресу и применяет активный класс

$(function() {
    // this will get the full URL at the address bar
    var url = window.location.href;

    // passes on every "a" tag
    $("#vmenuList a").each(function() {
        // checks if its the same on the address bar
        if (url == (this.href)) {
            $(this).closest("a").addClass("active");
        }
    });
}); 

Это добавляет родительский класс к ближайшему родителю (если он есть), чтобы его также можно было выделить. Он также добавляет открытый класс, чтобы подменю оставалось открытым, если пользователь находится на ссылке подменю.

$(document).ready(function () {
    $(function() {  
        $(".active").closest("#vmenuList > li").addClass("parent open");
    });
});

Я также использую файл cookie jquery, чтобы запомнить пункт меню, хотя я не уверен, что это необходимо.

$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
    if (checkCookie != "") {
        $('#vmenuList > li > a:eq('+checkCookie+')').next().show();
    }
    $('#vmenuList > li > a').click(function(){
        var navIndex = $('#vmenuList > li > a').index(this);
        $.cookie("nav-item", navIndex);
        $('#vmenuList li ul').slideUp();
        if ($(this).next().is(":visible")){
            $(this).next().slideUp();
        } else {
            $(this).next().slideToggle();
        }
        $('#vmenuList li a').removeClass('active');
        $(this).addClass('active');
    });
});