Currently, I am dealing with ASP.NET MVC 4 and have a nested list within my razor view structured as follows:
<ul class="nav" id="product-cat-menu">
<li><a href="/Products/Index?category=2002">Dental <i class="fa fa-plus-square-o rightdown"></i></a>
<ul>
<li><a href="/Products/Index?category=2004">Materials <i class="fa fa-plus-square-o rightdown"></i></a>
<ul>
<li><a href="/Products/Index?category=2011">Pulp<i class="fa fa-plus-square-o rightdown"></i></a></li>
<li><a href="/Products/Index?category=3011">Etchants <i class="fa fa-plus-square-o rightdown"></i></a>
</ul>
<li><a href="/Products/Index?category=2006">Medicines <i class="fa fa-plus-square-o rightdown"></i></a>
<ul>
<li><a href="/Products/Index?category=2011">Pulp<i class="fa fa-plus-square-o rightdown"></i></a></li>
<li><a href="/Products/Index?category=3011">Etchants <i class="fa fa-plus-square-o rightdown"></i></a>
</ul>
</li>
</ul>
</li>
<li><a href="/Products/Index?category=2003">Oral <i class="fa fa-plus-square-o rightdown"></i></a></li>
</ul>
In addition to the HTML structure above, here are the CSS styles used for this list:
#product-cat-menu li {
cursor: pointer;
position: relative;
}
#product-cat-menu li .rightdown {
position: absolute;
right: 0;
}
#product-cat-menu ul {
display: none;
}
#product-cat-menu li ul li {
padding: 5px 0 5px 25px;
width: 100%;
}
Furthermore, there is a jQuery function implemented as follows:
$(document).ready(function () {
$("#product-cat-menu a").click(function () {
$("#product-cat-menu ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
However, upon clicking on the list item, it slides down to reveal the child list, but once redirected to the controller action, it then slides back up. The desired behavior is for the slide down effect to persist even after refreshing the page.
To address this issue, I have attempted the following jQuery code snippet:
$(document).ready(function () {
$("#product-cat-menu a .rightdown").click(function() {
//...........
});
});
Unfortunately, this solution does not seem to be effective in achieving the intended outcome.