Question

过了漫长的一天所以我想或者更确切地知道我在这里犯了一个愚蠢的错误，但任何人都可以看到什么？

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

我的好朋友，

您的问题在于.on（）事件。您必须单独指定参数，因此它应该如下所示：

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

请注意，click和tap都有一组单独的括号？这应该可以解决您的问题。不能说为什么这与你如何定位多个元素有所不同，但我确信JQuery大师有充分的理由。欢呼声。

Answer 2

尝试：

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

Answer 3

由于我的tabClick功能，on click事件无法正常工作，因此我在其中调用了该函数...唯一的问题是它是否在页面加载时向下滚动，原因如下：

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

更改为

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

解决了这个问题，所有工作

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'));
  });
});

jQuery动画scrollTo无法处理点击事件

4 个答案: