Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mike Dorst 17 posts 103 karma points
    5 days ago
    Mike Dorst
    0

    Stop navigation from refreshing

    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:

    Menu

    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.

  • Mike Dorst 17 posts 103 karma points
    4 days ago
    Mike Dorst
    0

    Does anyone know how to fix it?

Please Sign in or register to post replies

Write your reply to:

Draft