jQuery的向上滑动和向下滑动切换

Question

我与ASP.NET MVC 4，工作我有一个嵌套列表在我的Razor视图像这样：

<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() { 
     //........... 
    }); 
}); 

，但是这是行不通的。

Answer 1

我相信你需要防止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