アコーディオン機能

Question

私は非常にうまく動作する（ブラウザ間でテストされていない）アコーディオンスクリプトを作成し、各引き出し内のコンテンツを画面上でアクセスして見えるようにしました。何度もアコーディオンが開き、開かれた後の位置付けに問題を引き起こします。とにかく、私が使用しているコードには、アクティブなトグル機能とクリック時に呼び出されるスクロール機能があります。

function toggleActive(link){ // Set anchor to active 
    if ($(link).hasClass("active")) { 
     $(link).removeClass("active"); 
    } else { 
     $(link).addClass("active"); 
    }; 
}; 

function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed 
    time = typeof(time) != 'undefined' ? time : 1000; 
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; 
    element = $(selector); 
    offset = element.offset(); 
    offsetTop = offset.top + verticalOffset; 
    $('html, body').animate({scrollTop: offsetTop }, time); 
} 

$('#accordion a').click(function(e) { 
    var link = '#' + event.target.id 
    $(".tab-content").slideUp(); 
    $(".tab").removeClass("active"); 
    toggleActive(link); 
    $(link).next().slideToggle("fast"); 
    setTimeout(function() { 
     scrollToElement($(link), 500); 
    }, 500); 

    e.preventDefault(); 

}); 

クリックすると、すべてのタブが閉じられ、非アクティブになり、ターゲットの「引き出し」が開き、アクティブになります。何らかの理由ですでに「アクティブな」ドロワーをクリックした場合は、再びスクリプトを実行します。私がしたいのは、あなたがちょうどクリックしたものが既に開いているかどうかを判断し、単純にその引き出しを閉じるIF文を配置することです。前もって感謝します。なぜこれが私の頭痛を引き起こしているのか分かりません。

JSFiddle

Answer 1

私はあなたが以下のように別の機能を必要と理解したよう：

function isAlreadyActive(link) 
{ 
    if ($(link).hasClass("active")) { 
     $(link).removeClass("active"); 
     return true; 
    } else { 
     return false; 
    }; 
} 

そして、あなたはあなたのクリックイベントでその関数を呼び出す必要があります。この機能はリンクが既にアクティブであるかどうかをチェックします。

$('#accordion a').click(function(e) { 
    var link = '#' + event.target.id 


    /* if it is already active, just deactivate it and exit*/ 
    if(isAlreadyActive(link)){ 
     return false; 
    } 



    $(".tab-content").slideUp(); 
    $(".tab").removeClass("active"); 
    toggleActive(link); 
    $(link).next().slideToggle("fast"); 
    setTimeout(function() { 
     scrollToElement($(link), 500); 
    }, 500); 

    e.preventDefault(); 

}); 

これが役立ちます。