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;を追加してください。

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

    donateScroll(); 

    return false; 
}); 

あなたの寄付ボタンは、URLで#donateを持っているので、これが起こっています。デフォルトでは

<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

関連する問題