javascript - jQuery 选项卡在移动设备中不起作用 - 自定义代码

Question

我刚刚注意到，在移动设备上，当调整到移动设备时，我的标签页没有点击和更改，想知道是否有人能看出原因吗？

我在这里创建了一个 fiddle :https://jsfiddle.net/a6k70p0L/2/

在桌面 View 中工作正常，但在调整大小时，点击事件似乎确实会触发并发生变化。

JS:

$(document).ready(function() {

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

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

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

    var tabClick = function() {

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

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

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

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

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

        // Disabled to stop on mobile auto scrolling down to product description when clicking through...
        $('html, body').animate({
          scrollTop: $(this).offset().top - 15
        }, 2000);

        return false;
    }

    //bind to resize
    $(window).resize( function() {
      if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
        desktopTabs();
        $('#tab_description h6').on("click, touchstart", tabClick);

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

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

    //check for the orientation event and bind accordingly
    window.addEventListener("orientationchange", function() {
      if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
        desktopTabs();
        $('#tab_description h6').on("click, touchstart", tabClick);

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

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

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

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

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

  });

Answer 1

将您的 $('ul.tabs').each... 包装在函数中，并在移动设备中完成所有 a/h6 标签附加后调用该函数。或者在每个语句之前调用附加函数。

each 语句触发并应用于 DOM 中当前可用的所有内容，因为您的附加函数尚未启动……each 语句不知道它在那里。然后您的附加内容发生在您的移动功能中，并且每个语句都不知道它存在(因为它在移动功能之前被触发)。

编辑 - 工作答案

在这里检查更新的 fiddle :https://jsfiddle.net/a6k70p0L/6/

我在下面的评论中提到了我的更改。