2017-04-20 5 views
0

탐색 링크에서 내 링크를 클릭하면 하위 메뉴가 상위 페이지로 연결됩니다.하위 메뉴 링크를 클릭하고 하위 탐색을 표시하는 방법

부모 페이지가로드되기 전에 하위 메뉴가 잠시 표시되기 때문에 링크에 하위 메뉴가있는 경우 클릭 연결을 해제 할 수 있습니까?

$(function(){ 

    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle(); 
    }); 
}); 

<div class="main-nav navbar-right"><ul id="menu-main-navigation" class="main-nav-ul"><li id="menu-item-46" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-46"><a href="http://www.chris-whiting.co.uk/development/">Home</a></li> 
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://www.chris-whiting.co.uk/development/about/">About</a></li> 
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-78 current_page_item menu-item-has-children menu-item-82"><a href="http://www.chris-whiting.co.uk/development/services/">Services</a> 
<ul class="sub-menu" style="display: none;"> 
    <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.chris-whiting.co.uk/development/services/service-one/">Service One</a></li> 
</ul> 
</li> 
<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://www.chris-whiting.co.uk/development/contact/">Contact</a></li> 
</ul></div> 

답변

3

사용 preventDefault() :

$("li:has(ul)").click(function(e){ // pass the click event to the function 
     e.preventDefault(); // Stop the link from following 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle(); 
    }); 
+0

감사합니다! 대답을 수락 할 때 받아 들일 것입니다 .. – Chris

+1

이렇게하면 하위 앵커가 작동하지 않습니다. –

+0

질문에 다시 답을 구 했으므로 이미 문제에 답변 해 주셨습니다. 감사합니다. 감사합니다. 감사합니다. 감사합니다. 당신. – Chris