Jquery 아코디언 메뉴가 앵커 태그로 스크롤되지 않음

Question

하위 메뉴가 열리면 페이지가 앵커 링크로 이동하지 않는다는 점을 제외하고는 큰 효과가있는 바닥 글에 jquery 아코디언 메뉴가 있습니다. 이것이 내 꼬리말에 있기 때문에 아래로 스크롤하여 열린 하위 메뉴를보아야합니다. 페이지가 자동으로 아래로 스크롤되기를 원합니다.

이것이 작동하지 않는 이유는 무엇입니까? 나는 또한 ID를 퍼팅 시도했지만 작동하지 않았다.

내 HTML :

<ul class="footer-offices"> 
<li id="#sanfran" class="one"><a href="#sanfran">text</a> 
    <ul class="submenu"><li>office info here</li></ul> 
</li> 
</ul> 

JQuery와는 다음과 같습니다

$(document).ready(function(){ 
$("ul.footer-offices li > a").on("click", function(e){ 
if($(this).parent().has("ul")) { 
    e.preventDefault(); 
} 
if(!$(this).hasClass("open")) { 
    // hide any open menus and remove all other classes 
    $("ul.footer-offices li ul").slideUp(350); 
    $("ul.footer-offices li a").removeClass("open"); 

    // open our new menu and add the open class 
    $(this).next("ul").slideDown(350); 
    $(this).addClass("open"); 
} 
else if($(this).hasClass("open")) { 
    $(this).removeClass("open"); 
    $(this).next("ul").slideUp(350); 
}  
}); }); 

Answer 1

그것은이 부분입니다. 에있는 #은 그 뒤에 오는 것이 ID이므로 #sanfran이 중복됨을 나타냅니다.

그냥이 있어야한다 : 다른

<li id="sanfran" class="one"> 

모든 것이 잘 보인다.

Answer 2

이 올바른 것 같다 :

<ul class="footer-offices"> 
    <li id="sanfran" class="one"><a href="#sanfran">San Francisco Headquarters</a> 
    <ul class="submenu"><li>office info here</li></ul> 
    </li> 

    <li id="boston"><a href="#boston">Boston Headquarters</a> 
    <ul class="submenu"><li>office info here</li></ul> 
    </li> 
</ul> 

당신이 안 귀하의 ID에 # 태그가나요 그곳에?

당신이 있습니다

<li id="#sanfran" class="one"> 

를 그리고이 있어야한다 :

<li id="sanfran" class="one"> 

UPDATE :

가 점프를 방지하여 자바 스크립트에서 preventDefault인가?

if($(this).parent().has("ul")) { 
    e.preventDefault(); 
} 

해당 코드를 제거하면 어떻게됩니까? #없이,

<li id="#sanfran" class="one"> 

ID 그냥 말을해야 sanfran :