CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jan
Jan

Reputation: 582

Add and remove class to nav after page reload

I have a navigation which can have up to two sub menus. Means, I have to open the li above (add class "open" to class "arrow") two times if the current page is a href in a sub sub navigation.

However, I am struggling on how to do this, how to solve this problem. My idea was to solve it via jQuery. Is there a better solution?

This is my navigation:

<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
    <li class="nav-item start">
        <a href="my-domain.com/dashboard" class="nav-link nav-toggle">
            <i class="icon-home"></i>
            <span class="title">Dashboard</span>
            <span class="selected"></span>
        </a>
    </li>
    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link nav-toggle">
            <i class="icon-people"></i>
            <span class="title">Kontakte</span>
            <span class="arrow"></span>
        </a>
        <ul class="sub-menu">
            <li class="nav-item">
                <a href="my-domain.com/kontaktverwaltung" class="nav-link ">
                    <span class="title">Kontaktverwaltung</span>
                    <span class="selected"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link nav-toggle">
                    <span class="title">Kunden</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu">
                    <li class="nav-item ">
                        <a href="my-domain.com/kundendetails" class="nav-link "> Kundendetails </a>
                        <span class="selected"></span>
                    </li>
                    <li class="nav-item">
                        <a href="my-domain.com/kundenverwaltung" class="nav-link "> Kundenverwaltung </a>
                        <span class="selected"></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Example: The current page is this one: my-domain.com/kundenverwaltung. That means, I have to add the class "active open" to both li elements of the ul sub menus as well as the class "open" to the class "arrow" of the li elements.

This is how it should be:

<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
    <li class="nav-item start">
        <a href="my-domain.com/dashboard" class="nav-link nav-toggle">
            <i class="icon-home"></i>
            <span class="title">Dashboard</span>
        </a>
    </li>
    <li class="nav-item **active open**">
        <a href="javascript:void(0)" class="nav-link nav-toggle">
            <i class="icon-people"></i>
            <span class="title">Kontakte</span>
            <span class="arrow **open**"></span>
        </a>
        <ul class="sub-menu">
            <li class="nav-item">
                <a href="my-domain.com/kontaktverwaltung" class="nav-link ">
                    <span class="title">Kontaktverwaltung</span>
                </a>
            </li>
            <li class="nav-item **active open**">
                <a href="javascript:void(0)" class="nav-link nav-toggle">
                    <span class="title">Kunden</span>
                    <span class="arrow **open**"></span>
                </a>
                <ul class="sub-menu">
                    <li class="nav-item ">
                        <a href="my-domain.com/kundendetails" class="nav-link "> Kundendetails </a>
                    </li>
                    <li class="nav-item">
                        <a href="my-domain.com/kundenverwaltung" class="nav-link "> Kundenverwaltung </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I have marked the changes on the classes with ** before and after the class name. This is my jQuery so far:

<script>
$("a.nav-link").each(function(index){
    if($(this).attr("href") == window.location.href) {
        $(this).parent().addClass("active open");

        if ($(this).parent().parent().is("ul")) {
            $(this).parent().parent().parent().addClass("active open");
            var li = $(this).parent().parent().parent();
            $(li[0].nodeName + " .arrow").addClass("open");
        }
    }
});
</script>

However, I don't think this is the best solution.. is there any better way? Kind regards

Upvotes: 0

Views: 167

Answers (1)

vkatsuba
vkatsuba

Reputation: 1459

  1. If you change the structure of HTML, your code will not be work, so - don't use parent(), try to use closest() https://api.jquery.com/closest, by reason that the closest() is a more reliable method

  2. Cache data. U can use http://api.jquery.com/attribute-equals-selector:

    var $a = jQuery('a[href*="' + window.location.href + '"]'); $a.addClass("active open");

  3. For adding a class to active page you should try added this by backend side, different kind of templating - can do it. But your approach also can be use

Upvotes: 2

Related Questions