2017-01-03 6 views
2

아코디언에 연결하고 토글을 연다는 앵커 링크를 얻으려고합니다.Wordpress Divi Theme - 아코디언 토글에 대한 앵커 링크

Google에서 코드 스 니펫을 찾았지만 완전히 그런 것은 아닙니다.

내가 아코디언이 켜져있는 페이지에서 앵커 링크를 클릭하면 아코디언으로 올바르게 스크롤되고 탭이 열립니다. 그러나 현재 페이지를 새로 고치고 머물러 있지 않습니다. 아코디언이있는 곳.

아코디언이있는 페이지가 아닌 다른 페이지에서 앵커 링크를 클릭하면 아코디언이 아닌 해당 페이지로 연결됩니다.

도움이되면 도움이 될 것입니다.

URL은 앵커 링크 페이지의 오른쪽 상단에있는 '기부하기'버튼입니다 http://casafamilyserv.wpengine.com/resources/

입니다. 여기

은 JS 스 니펫입니다 :

<script> 
    jQuery(function($) { 
    //accordion 
    $('.menu-item-98 a').on('click', function(event){ 
     $('#my-accordion .et_pb_accordion_item_2 .et_pb_toggle_title').click(); 
     $("html, body").animate({ scrollTop: $('#my-accordion').offset().top }, 1000); 
    }); 
}); 

</script> 

앵커 링크는 '기부/기여'아코디언 탭을 열 수 있습니다.

답변

2

그냥 return false;을 추가하십시오. 당신의 기부 버튼을 URL에 #donate을 가지고 있기 때문에

$('.menu-item-98 a').on('click', function(event){ 
    // sometimes you may also need to add 
    // event.preventDefault(); 

    donateScroll(); 

    return false; 
}); 

이 일어나고있다. 기본적으로

<a href="/resources#donate">Make A Donation</a> 

, 브라우저 어딘가에 페이지 id="donate"을 찾기 위해 노력하고 그것에 이동합니다. return false;을 추가하면 기본 동작이 차단되고 js가 click 이벤트를 완전히 제어 할 수 있습니다.

또한 다른 페이지에서 도착하는 경우 기존 해시를 확인하기 위해 뭔가를 추가 할 수 있습니다 : 당신의 스크롤을 반복하는 대신

function donateScroll(){ 
    $('#my-accordion .et_pb_accordion_item_2 .et_pb_toggle_title').click(); 
    $("html, body").animate({ scrollTop: $('#my-accordion').offset().top }, 1000); 
} 

if(window.location.hash == '#donate') { 
    donateScroll(); 
} 

및 로직을 클릭, 당신은 또한 재사용 가능한 기능으로 이동할 수 있습니다.

+0

도움말 및 설명에 감사드립니다. 반환 false를 추가하면 버튼을 클릭 할 때 페이지가 새로 고쳐지지 않습니다. 그러나 아코디언이있는 페이지가 아닌 다른 페이지에서 버튼을 클릭하면 페이지를로드하고 아코디언으로 점프하지 않습니다. event.preventDefault()를 추가했을 때; 단추를 모두 클릭하지 못했습니다. – Trisha

+0

@Trisha 나는 나의 대답을 편집했다. 거의 –

+0

! 이제 페이지를로드하고 아래로 스크롤하지만 아코디언 토글을 열지 않습니다. – Trisha