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