[英]Jquery Slide up and Slide down toggle
I am working with ASP.NET MVC 4. I have a nested list in my razor view like so: 我正在使用ASP.NET MVC4。在剃刀视图中有一个嵌套列表,如下所示:
<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>
And the main CSS is: 主要的CSS是:
#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%;
}
And jQuery is like: jQuery就像:
$(document).ready(function () {
$("#product-cat-menu a").click(function () {
$("#product-cat-menu ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
The problem is that when clicking on the li
it slides down the child list but after going to the controller action it is slides up. 问题是,单击
li
它会在子列表中向下滑动,但是在执行控制器操作后,它会向上滑动。 I want show the slide down part after the page refreshing. 我想在页面刷新后显示下滑部分。
For that i am trying the following code also: 为此,我也在尝试以下代码:
$(document).ready(function () {
$("#product-cat-menu a .rightdown").click(function() {
//...........
});
});
but this is not working. 但这不起作用。
I believe you need to prevent the default behaviour of the html anchor tag ( <a>
) occurring. 我相信您需要防止html锚标记(
<a>
)的默认行为发生。
The line that is missing is: 缺少的行是:
evt.preventDefault();
The full code example is as follows: 完整的代码示例如下:
$(document).ready(function () {
$("#product-cat-menu a").click(function (evt) {
evt.preventDefault();
$("#product-cat-menu ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
You can see this in a JSFiddle here: DEMO 您可以在JSFiddle中看到以下内容: DEMO
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.