jQueryアニメのスクロールはクリックイベントでは動作しません

Question

長い日でしたので、私はここで愚かな間違いをしていると思いますが、だれかが何を見ることができますか？

フィドル：https://jsfiddle.net/ehv1hyco/3/

JS：

$(document).ready(function() { 

    function scrollToTab(tabScrollTo){ 
    $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, 2000); 
    } 

    $('#tab_description h6 a').on("click, tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 

}); 

フィドルと上記のjsがこの質問を簡素化するためのコードの大きな部分からわずかモックアップである - ので、HTMLのマークアップが生成されたもので正確です必要であれば、ここでは、CMSから

は全体のJSです：

$(document).ready(function() { 

    var originalTabs = $('.originalTabs').html(); 
    var windowWidth = 0; 

    function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
    } 

    //clearTabs(); 
    //desktopTabs(); 

    function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
     $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
     $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
     var active, content, links = $(this).find('a'); 
     var listitem = $(this).find('li'); 
     active = listitem.first().addClass('active'); 
     content = $(active.attr('href')); 
     $('.tab').hide(); 
     $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
     }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
    } 

    function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
     $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
     //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
     $(this).on('click', function() { 
     tabClick($(this)); 
     }); 
    }); 

    $('#tab_description h6').first().trigger('click').addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
    } 

    var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    $('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
     $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).next().is(":visible"); 

    // Hide all accordion items 
    accordionContent.hide(); 

    //console.log(x); 
    // Open accordion item if previously closed 
    if (!isOpen) { 
     $(x).nextUntil('h6').show(); 
     $(x).nextUntil(accordionContent).show(); 
    } 

    //console.log($(x).find('a').attr('href')); 

    } 

    function scrollToTab(tabScrollTo){ 
    $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, 2000); 
    } 

    //load default 
    $(window).on("load",function(){ 

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     desktopTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

     //console.log(originalTabs); 
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     mobileTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

    } else if (isDesktop) { 
     //alert("Desktop"); 
     desktopTabs(); 
    } 
    }); 

    //bind to resize 
    $(window).on("orientationchange resize",function(){ 

    if(windowWidth != $(window).width()){ 

     if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     desktopTabs(); 
     $('#tab_description h6').on("click, tap", tabClick); 

     } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     mobileTabs(); 
     $('#tab_description h6').on("click, tap", tabClick); 

     } else if (isDesktop) { 
     desktopTabs(); 
     } 

     windowWidth = $(window).width(); 
     delete windowWidth; 

    } 

    }); 

    $('#tab_description h6 a').on("click, tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 

}); 

Answer 1

ので、私はその内の関数を呼び出した...唯一の問題は、それをページのロードを下にスクロールしてによるものであったたさに起因私tabClick機能に働いていませんでした次

$('#tab_description h6').first().addClass("active"); 

に変更

$('#tab_description h6').first().trigger('click').addClass("active"); 

ので、すべてのワーキンをその問題を解決しましたグラム

Answer 2

私の親友、

あなたの問題は.on（）イベントにあります。パラメータを個別に指定する必要があります。

$('#tab_description h6 a').on("click", "tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 

クリックとタップの両方に別々のかっこがありますか？これはあなたの問題を解決するはずです。なぜこれが複数の要素をどのようにターゲットとするかとは異なるとは言えませんが、私はJQueryの達人が正当な理由があったと確信しています。乾杯。

Answer 3

試し：クリックイベントに

$('#tab_description h6 a').on("click tap", function(){ 
    scrollToTab($(this).attr('href')); 
}); 

Answer 4

$(document).ready(function() { 
    function scrollToTab(tabScrollTo){ 
    $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, 2000); 
    } 

    // not on("click, tap", ... 
    // but on("click tap", ... 
    $('#tab_description h6 a').on("click, tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 
}); 

これを試してみてください、私はあなたの完全なコードを読んで を追加しました。おそらくこれが役に立ちます。今行くそれを与える

$(window).on("load",function(){ 
    .... 

    // add this to the last 
    $('#tab_description h6 a').on("click, tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 
}); 


$(window).on("orientationchange resize",function(){ 
    ... 

    // add this to the last 
    $('#tab_description h6 a').on("click, tap", function(){ 
    scrollToTab($(this).attr('href')); 
    }); 
});