[英]Jquery Slide up and Slide down toggle
我正在使用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>
主要的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%;
}
jQuery就像:
$(document).ready(function () {
$("#product-cat-menu a").click(function () {
$("#product-cat-menu ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
問題是,單擊li
它會在子列表中向下滑動,但是在執行控制器操作后,它會向上滑動。 我想在頁面刷新后顯示下滑部分。
為此,我也在嘗試以下代碼:
$(document).ready(function () {
$("#product-cat-menu a .rightdown").click(function() {
//...........
});
});
但這不起作用。
我相信您需要防止html錨標記( <a>
)的默認行為發生。
缺少的行是:
evt.preventDefault();
完整的代碼示例如下:
$(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();
}
});
});
您可以在JSFiddle中看到以下內容: DEMO
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.