Jquery - トグルされた要素の中のハイパーリンクを修正する

Question

私はいくつかのJqueryスクリプトに問題があります。誰かが私を正しい方向に向けることを願っています。

私は最初に隠された領域を持っていますが、クリックすると内容が表示され、再度クリックすると内容が隠されます。 この領域には一連のハイパーリンクがあります。私が直面している問題は、これらのリンクをクリックすると、別の場所にリダイレクトするのではなく、コンテナが再び閉じることです。私はなぜこれが起こっているのか見ることができますが、私はそれを修正する方法がわかりません。

機能： -

function toggleDisplay(itemToToggle, itemHeightOpen, itemHeightClosed) { 
$(itemToToggle).toggle(
    function() { 
    $(this).animate({ 'height': itemHeightClosed }).addClass('minus'); 
    }, 
     function() { 
    $(this).animate({ 'height': itemHeightOpen }).removeClass('minus'); 
    }); 
}; 

コール： -

var heighttomatch = $('#inlineSummaryWrapper').height() + 28; 
toggleDisplay('#inlineSummary', '1.2em', heighttomatch); 

HTML： -

<div id="inlineSummary" class="displayToggle"> 
    <h2>Summary</h2> 
    <div id="inlineSummaryWrapper"> 
    <a href="/mylink">the link</a> 
    </div> 
</div> 

私はクリックの内側に "呼び出し" をラップしようとしませんでしたH2をターゲットにしたアクションだが、コンテナの開閉には奇妙な効果があったので、何をすべきか分からない。

ご協力いただきありがとうございます。

Answer 1

これは、リンク上のclickイベントが伝播するために発生します。あなたはevent.stopPropagation()でそれを止めることができます。

function toggleDisplay(itemToToggle, itemHeightOpen, itemHeightClosed) { 
    $(itemToToggle).find('a').click(function (e) { 
     e.stopPropagation(); 
    }); 
    ... 
}