2011-12-21 5 views
0

다시. 내가 만들고있는 메뉴가 있습니다. 메인 카테고리 중 하나를 클릭 할 때 페이지가 맨 위로 이동한다는 점을 제외하면 모든 것이 잘 작동합니다. 이 문제를 방지하고 싶습니다만, preventDefault()를 사용하면 다른 링크가 올바르게로드되지 않을까 걱정됩니다. 여기 jquery 슬라이딩 메뉴

이 .. jQuery를

$(document).ready(function() { 
    // Collapse everything but the first menu: 
    $("#nav_menu > li > a").find("+ ul").slideUp(1); 
    // Expand or collapse: 
    $("#nav_menu > li > a").click(function() { 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 
}); 

마크 업

<ul id="nav_menu"> 
    <li><a href="#">Main Cat 1</a> 
     <ul> 
      <li><a href="whatever.php">Subcat 1</a></li> 
      <li><a href="whatever.php">Subcat 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Main Cat 2</a> 
     <ul> 
      <li><a href="whatever.php">Subcat 1</a></li> 
      <li><a href="whatever.php">Subcat 2</a></li> 
     </ul> 
    </li> 
</ul> 

코드입니다 이것에 어떤 도움을 주시면 감사하겠습니다! :)

답변

2

요소가 href를 트리거하지 않도록 preventDefault 함수를 호출해야합니다.

$(document).ready(function() { 
    // Collapse everything but the first menu: 
    $("#nav_menu > li > a").find("+ ul").slideUp(1); 
    // Expand or collapse: 
    $("#nav_menu > li > a").click(function(e) { 
     e.preventDefault(); 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 
}); 
+0

하위 링크의 페이지로드가 중단되지 않습니까? – chaoskreator

+0

메인 섹션에만 ... –

+0

아, 네. 나는 그것이 지금 어떻게 작동하는지 안다. 고맙습니다! – chaoskreator