Hello, Anyone MVC Jquery expert here? When I click one of any parent menu all menus child get loaded.

Question

User140010582 posted

My Razor code: I have loaded menu data from database

    <li class="menu-list" id="nav">
        @foreach (var item in Model)
        {
            if (item.MenuGroup == "0")
            {    //this below is parent menu
                <a href=""><i class="@item.ImageClass"></i> <span>@item.Description</span></a>
            }
            else if (item.MenuGroup ==  item.Hierarchy.Substring(0,1))
            {
                   //this below is child menu 

                <ul class="child-list">
                    <li><a href="form-elements.html">@item.Description</a></li>
                </ul>

            }
        }
    </li>

I have tried multiple jquery code but couldn't work in my context 

First:

    $('#menu-content').children("li").on('click', function () {
        $("li[data-toggle='collapse']").not(this).addClass('collapsed');
        $("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
        //alert('clicked');
    });

Second

        $("#nav > li > a").on("click", function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }

            if (!$(this).hasClass("open")) {
                // hide any open menus and remove all other classes
                $("#nav li ul").slideUp(350);
                $("#nav li a").removeClass("open");

                // open our new menu and add the open class
                $(this).next("ul").slideDown(350);
                $(this).addClass("open");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(350);
            }
        });
        $("#nav > li:first > a").trigger('click');
    });

suggest me proper solution.

Answer 1

User409696431 posted

What is the problem you are facing?  Don't just put it in the post title - that gets truncated.  Put it in the body of the post.

Answer 2

User140010582 posted

Hello KathyW sorry for that :

I am loading list of data from database to the Model. And filtering list of data according to the condition. I can able to load the Menu data dynamically from database but, The problem I am facing is when I click parent menu all the submenu get loaded in my view.

let say:

UserManagement //parent menu in my view which is loaded by if condition in above code.

   -submenu1          //submenu which is loaded by else if condition 

   -submenu2   

Loan Management

   -submenu1

   -submenu2

CC Management 

   -submenu1

   -submenu2

when I load view all menu are in Position like below:

UserManagement   

Loan Management

CC Management 

let say when I click UserManagement menu item my purpose is it only show me menu item of UserManagement like:

UserManagement

   -submenu1

   -submenu2

But, It is showing all menu like below when I click any of parent menu in list. What is my problem? I want to show respective menu subitem when I click that menu other are must be hidden like in normal application.

UserManagement 

   -submenu1          

   -submenu2   

Loan Management

   -submenu1

   -submenu2

CC Management 

   -submenu1

   -submenu2

Answer 3

User1686398519 posted

Hi,  sandesh pokhrel

Since you did not give the data, I assumed some data. You can refer to this example below.

Controller

public ActionResult Index()
        {
            List<MenuTest> meunulist = new List<MenuTest>
            {
                new MenuTest{MenuGroup="0",Description="UserManagement",Hierarchy="1" },
                new MenuTest{MenuGroup="0",Description="LoanManagement",Hierarchy="2" },
                new MenuTest{MenuGroup="0",Description="CCManagement ",Hierarchy="3" },
                new MenuTest{MenuGroup="1",Description="submenu1",Hierarchy="11" },
                new MenuTest{MenuGroup="1",Description="submenu2",Hierarchy="12" },
                new MenuTest{MenuGroup="2",Description="submenu1",Hierarchy="21" },
                new MenuTest{MenuGroup="2",Description="submenu2",Hierarchy="22" },
                new MenuTest{MenuGroup="3",Description="submenu1",Hierarchy="31" },
                new MenuTest{MenuGroup="3",Description="submenu2",Hierarchy="32" }
            };
            return View(meunulist);
        }

View

<style>
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }

    .dropdown {
        ;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        ;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

     .dropdown-content a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
     }

     .dropdown-content a:hover {
          background-color: #f1f1f1;
     }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
</style>
@foreach (var item in Model)
{
    <li class="dropdown">
        @if (item.MenuGroup == "0")
        {    //this below is parent menu
            <a class="dropbtn" href=""><i class=""></i> <span>@item.Description</span></a>
            <ul class="dropdown-content">
                @foreach (var item2 in Model)
                {
                    if (item2.MenuGroup != "0" && item2.MenuGroup == item2.Hierarchy.Substring(0, 1) && item2.MenuGroup == item.Hierarchy)
                    {
                        <a href="form-elements.html">@item2.Description</a>
                    }
                }
            </ul>
        }
    </li>
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('.dropdown').hover(function (e) {
            $(this).find('.dropdown-content').stop().slideToggle();
        });
    })
</script>

Here is the result.

 
Best Regards,

YihuiSun

Answer 4

User140010582 posted

Hello YihuiSun First of all thanks for your reply,

Sorry for not giving data:

My Data is:

public ActionResult Index()
        {
            List<MenuTest> meunulist = new List<MenuTest>
            {
                new MenuTest{Hierarchy="1",Description="Operation Dashboard",MenuGroup="0" },
                new MenuTest{Hierarchy="A",Description="Pipeline Management",MenuGroup="0" },
                new MenuTest{Hierarchy="Ac",Description="Pipeline Management",MenuGroup="A" },
                new MenuTest{Hierarchy="Ad",Description="Dashboard",          MenuGroup="A" },
                new MenuTest{Hierarchy="Ae",Description="Add Deposit Pipeline",MenuGroup="A" },
                new MenuTest{Hierarchy="Ag",Description="Add Loan Pipeline",MenuGroup="A" },
                new MenuTest{Hierarchy="B",Description="Manage Pipeline",MenuGroup="A" },
                new MenuTest{Hierarchy="C",Description="Insurance Management",MenuGroup="0" },
                new MenuTest{Hierarchy="Ca",Description="Recovery Management",MenuGroup="0" },
                new MenuTest{Hierarchy="Cd",Description="Dashboard",MenuGroup="C" },
                new MenuTest{Hierarchy="Ce",Description="Manage Daiary Note",MenuGroup="C" },
                new MenuTest{Hierarchy="Cp",Description="Recovery Actions",          MenuGroup="C" },
                new MenuTest{Hierarchy="Cq",Description="Recovery Status",MenuGroup="C" },
                new MenuTest{Hierarchy="Cr",Description="Country LLP",MenuGroup="C" },
                new MenuTest{Hierarchy="D",Description="Branchwise LLP",MenuGroup="0" },
                new MenuTest{Hierarchy="Da",Description="Account Expiry Monitoring",MenuGroup="D" },

            };
            return View(meunulist);
        }

I have one database table which return this data:

This below html code is static Data:

                    <li class="menu-list">
                        <a href=""><i class="mdi mdi-book-multiple" aria-hidden="true"></i><span>Pages</span></a>
                        <ul class="child-list">
                            <li><a href="pages-profile.html">Profile</a></li>
                            <li><a href="pages-timeline.html">Timeline</a></li>
                            <li><a href="pages-invoice.html">Invoice</a></li>
                            <li><a href="pages-contact.html">Contact-list</a></li>
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>

                        </ul>
                    </li>

I am making this static data by Receiving Model like and Applying condition:

@model IEnumerable<UserManagement.Models.ViewModel.Menu_TableVm>

<li class="menu-list">
    @foreach (var item in Model)
    {
        if (item.MenuGroup == "0")
        {
            <a href=""><i class="@item.ImageClass"></i> <span>@item.Description</span></a>
        }
        else if (item.MenuGroup == item.Hierarchy.Substring(0, 1))
        {
            <ul class="child-list sub-menu">
                <li><a href="@item.FriendlyUrl">@item.Description </a></li>
            </ul>

        }
    }
</li>

I am applying condition in my above data like:

if item.MenuGroup=="0" This is parent menu:

else if item.MenuGroup == item.Hierarchy.Substring(0, 1) // child menu of that parent menu

Somehow I can able to get all menu list in respective order but, The problem when I compile and execute application:

The output is below image :

when I click any of the item in menu loan management or pipeline management or any other  the output is like

ie. all menu item  get open at once, I want to make when parent menu get clicked respective child menu item only get open other close .I have trayed multiple jQuery code and modifying my view logic but couldn't get solved. I am new to programming and Jquery I think this issue can be fixed using jQuery please help me out.

-thanks

Answer 5

User140010582 posted

some data value place wrong mistakenly sorry:

                new MenuTest{Hierarchy="1",Description="Operation Dashboard",MenuGroup="0" },
                new MenuTest{Hierarchy="A",Description="Pipeline Management",MenuGroup="0" },
                new MenuTest{Hierarchy="Ac",Description="Pipeline Management",MenuGroup="A" },
                new MenuTest{Hierarchy="Ad",Description="Dashboard",          MenuGroup="A" },
                new MenuTest{Hierarchy="Ae",Description="Add Deposit Pipeline",MenuGroup="A" },
                new MenuTest{Hierarchy="Ag",Description="Add Loan Pipeline",MenuGroup="A" },
                new MenuTest{Hierarchy="B",Description="Manage Pipeline",MenuGroup="0" },
                new MenuTest{Hierarchy="C",Description="Insurance Management",MenuGroup="0" },
                new MenuTest{Hierarchy="Ca",Description="Recovery Management",MenuGroup="C" },
                new MenuTest{Hierarchy="Cd",Description="Dashboard",MenuGroup="C" },
                new MenuTest{Hierarchy="Ce",Description="Manage Daiary Note",MenuGroup="C" },
                new MenuTest{Hierarchy="Cp",Description="Recovery Actions",          MenuGroup="C" },
                new MenuTest{Hierarchy="Cq",Description="Recovery Status",MenuGroup="C" },
                new MenuTest{Hierarchy="Cr",Description="Country LLP",MenuGroup="C" },
                new MenuTest{Hierarchy="D",Description="Branchwise LLP",MenuGroup="0" },
                new MenuTest{Hierarchy="Da",Description="Account Expiry Monitoring",MenuGroup="D" },

 

Answer 6

User1686398519 posted

Hi,  sandesh pokhrel

1. I cannot view the picture of the error message you gave.
2. I used the data you gave and the page code, and found this problem:The relationship between the parent menu and the child menu generated by your code is not a parent-child relationship, but a parallel relationship.

If you want to generate static data like you gave, you need to modify the logic of your page code.

<style>
    .menu > .menu-list1 > ul {
        display: none;
    }
</style>

<h2>Modified code</h2>
<ul class="menu">
    @foreach (var item in Model)
    {
        if (item.MenuGroup == "0")
        {
            <li class="menu-list1">
                <a href=""><i class="@item.ImageClass"></i> <span>@item.Description</span></a>
                <ul>
                    @foreach (var item2 in Model)
                    {
                        if (item2.MenuGroup == item2.Hierarchy.Substring(0, 1) && item2.MenuGroup == item.Hierarchy)
                        {
                            <a href="form-elements.html">@item2.Description</a>
                        }
                    }
                </ul>
            </li>
        }
    }
</ul>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('.menu>.menu-list1').hover(function (e) {
            $(this).find('ul').stop().slideToggle();
        });
    });
</script>

Here is the result.

 
Best Regards,

YihuiSun

Answer 7

User140010582 posted

Hello, I have attract image but these site removed it :

I gave you these images: when my page load this condition

https://drive.google.com/open?id=1PwP8MJpgquAJboaStdC7FVs4pe34R_gf

after clicking any menu item this happen:

https://drive.google.com/open?id=1n-V93OxcOuhb3DszS3e7PPieXmRYb_vg

https://drive.google.com/open?id=1u8mKg9ZCol_Owfy7CIvX27jq3907QEw3

https://drive.google.com/open?id=1z6tkUgp8WgmaI7JO2B5AK3tzHLp5CHaF

When I use code this happen:

https://drive.google.com/open?id=1MR-RwHGZ8X0D-Oh0WcvuH3yNvrz6HVq0

when I click menu item noting get happen.

-thank you for everything you are doing for me. After trying these process couldn't solve

Answer 8

User1686398519 posted

Hi,  sandesh pokhrel

The question you are having is when you click on one of the parent menus, will all the parent menus open their child menus? If so, you need to give the css style files you quoted and your complete page code, otherwise I cannot reproduce your problem.

Best Regards,

YihuiSun

Answer 9

User140010582 posted

Hello YihuiSun I am using predefined bootstrap template, I Have provided some files in following link :

https://drive.google.com/open?id=1Ets1pzx1_u_lt903wjpbIQI6hgE_B2Ke

-thank you

Answer 10

User1686398519 posted

Hi,  sandesh pokhrel

The method I provided to you before is effective. Just modify the code below side-navigation and add js code.

More details, you could refer to below code:

_Layout

<!--sidebar nav start-->
<ul class="side-navigation">
     @foreach (var item in Model)
     {
        if (item.MenuGroup == "0")
            {
                <li class="menu-list">
                    <a href=""><i class="@item.ImageClass"></i> <span>@item.Description</span></a>
                    <ul class="child-list">
                        @foreach (var item2 in Model)
                         {
                           if (item2.MenuGroup == item2.Hierarchy.Substring(0, 1) && item2.MenuGroup == item.Hierarchy)
                            {
                             <li><a href="form-elements.html">@item2.Description</a></li>
                            }
                         }
                     </ul>
               </li>
           }
      }
</ul>

$(function () {
   $('.side-navigation>.menu-list').hover(function (e) {
        $(this).find('.child-list').stop().slideToggle();
   });
});

Index

<div id="morris-donut-chart"></div>
<div id="extra-area-chart"></div>
<div id="morris-bar-chart"></div>
<div id="morris-line-chart"></div>

Here is the result.

 
Best Regards,

YihuiSun

Answer 11

User140010582 posted

thank u very much