Hello, I couldn't find anything regarding my issue so I decided to post one myself.

I am using a navigation bar that has dropdown menu's. Whenever I open the dropdown and navigate to one of those pages, the navigation refreshes and closes the dropdown menu. The dropdown menu needs to stay open when I go over to one of the pages, I tried Model.Content.AncestorOrSelf().Descendants("document") to try and keep the navigation bar from refreshing but that doesn't seem to work (as people said).

Here's my menu structure:

Everything underneath "Hulp per browser" is in a dropdown and will disappear when I click on "Hulp per browser" again.

Here is my code:

    <div class="col-sm-3">
    <div class="NavDigiCampuz">
        <h3>Helpcentrum</h3>
        <li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br>
            <ul class="nav nav-list tree">
                @{                                  
                    var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
                    var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
                }

                @foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){
                    foreach (var ItemChild in @item.Children("categorieMenu")){
                        if(ItemChild.Children.Any())
                        {
                        <li class="MenuItems"><p>@ItemChild.Name</p></li>   
                            foreach (var Subitem in @ItemChild.Children){
                                if (Subitem.Children("hoofdstuk").Any())
                                {
                                    <li class="item">
                                        @if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                            <a class="NormalA aNav" href="#"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name</a>
                                        }else{
                                            <a class="NormalA aNav" href="#">@Subitem.Name</a>
                                        }
                                        @foreach (var Finalitem in @Subitem.Children){
                                        <ul class="submenu">
                                            @if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                            <br><li><a class="NormalA aNav" href="@Finalitem.Url"><i class="fa fa-@(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>@Finalitem.Name</a></li>   
                                            <script>
                                                if(window.location.href.indexOf("@Finalitem.Url") > -1)
                                                {
                                                    $(".item").ready(function(){
                                                        $(this).children(".submenu").show(); //it will display or hide your submenu when clicking the item.
                                                    });
                                                }   
                                            </script>
                                            }else{
                                                <br><li><a class="NormalA aNav" href="@Finalitem.Url">@Finalitem.Name</a></li><br>
                                            }
                                        </ul>   
                                    } 
                                </li>
                            }else
                                {
                                    if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
                                    <li><a class="NormalA aNav" href="@Subitem.Url"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name</a></li>
                                    }else{
                                        <li><a class="NormalA aNav" href="@Subitem.Url">@Subitem.Name</a></li>  
                                    }
                                }

                            }   
                        }
                    }
                }
            </ul>
    </div>
</div>

<script>
    $(".item").click(function(){
        $(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
    });
</script>

<style>
    .submenu{
    display: none;
    list-style:none;
    }
</style>

I do plan on removing the script and style from the page when everything works.