Javascript 在jQuery中，轻触手机似乎可以重置手风琴标签

我有一个问题，无法解决，这相当重要，因为我确信这会影响移动设备的销售/转化率，因为这个问题甚至对我自己来说都是令人沮丧的

如果您转到：从移动设备（我使用iPhone）

然后向下滚动，默认情况下第一个选项卡打开。。。再往下一点，点击其他选项卡。。。大多数时候它会打开，然后它似乎会重置并打开第一个默认的？当你尝试时，你会明白我的意思

我刚刚将移动事件从touchstart更改为touchend，看看这是否有帮助，但没有，我不知道它为什么这么做？有人有什么想法或想法吗

JS:

$（文档）.ready（函数（）{
var originalTabs=$（'.originalTabs'）.html（）；
函数clearTabs（）{
$（'.originalTabs'）.html（originalTabs）；
}
//clearTabs（）；
//桌面选项卡（）；
函数desktopTabs（）{
clearTabs（）；
//用于桌面的cretate选项卡
风险值标题=$（“#选项卡描述h6”）；
$（'tab#tab_description h6'）。每个（功能（i）{
$（this.nextUntil（“h6”）.andSelf（）.wrapAll（“”）；
});
对于（变量i=0；i”）；
}
$（'ul.tabs'）。每个（函数（）{
var-active，content，links=$（this.find（'a'）；
var listitem=$（this.find（'li'）；
active=listitem.first（）.addClass（'active'）；
content=$（active.attr（'href'）；
$（'.tab'）.hide（）；
$（this）。查找（'a'）。单击（函数（e）{
$（'.tab'）.hide（）；
$（'ul.tabs li'）.removeClass（'active'）；
content.hide（）；
活动=$（此）；
content=$（$（this.attr（'href'））；
active.parent（）.addClass（'active'）；
content.show（）；
返回false；
});
});
headers.remove（）；//从描述中删除头
$（'#tab-0'）.show（）；//显示第一个选项卡
}
函数mobiletab（）{
clearTabs（）；
//警报（“装载手机”）；
风险值标题=$（“#选项卡描述h6”）；
$（标题）。每个（函数（i）{
$（此）。附加（“”）；
//$（this.nextUntil（“h6”）.andSelf（）.wrapAll（“”）；
$（此）。在（'单击'，函数（）上）{
tabClick（$（this））；
});
});
$（'#tab_description h6'）.first（）.trigger（'click'）.addClass（“active”）；
$（'#tab#u description h6'）.first（）.nextUntil（“h6”）.show（）；
}
var tabClick=函数（x）{
//警报（“点击”）；
var accordionContent=$（“#tab#u description p，#tab#u description ul，#tab#u description table，#tab#u description div”）；
$（'#tab#u description h6'）。removeClass（“活动”）；
if（！$（x）.hasClass（“活动”））{
$（x）.addClass（“活动”）；
}
//检查当前手风琴项目是否打开
var isOpen=$（x）.next（）是（“：可见”）；
//隐藏所有手风琴项目
accordionContent.hide（）；
//控制台日志（x）；
//如果以前关闭，则打开手风琴项目
如果（！isOpen）{
$（x）.nextUntil（'h6'）.show（）；
$（x）.nextUntil（accordionContent）.show（）；
}
//已禁用在移动设备上停止单击时自动向下滚动到产品说明。。。
//$（'html，body'）。设置动画({
//scrollTop:$（x）.offset（）.top-15
//}, 2000);
//返回false；
}
//绑定以调整大小
$（窗口）。调整大小（函数（）{
if（isMobileLandscapeOnly.matches | | isTabletLandscapeOnly.matches）{
桌面选项卡（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
}else if（IsMobilePortraytonly.matches | | IsTabletPortraytonly.matches）{
mobiletab（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
}else if（isDesktop）{
桌面选项卡（）；
}
});
//检查定向事件并相应绑定
addEventListener（“方向更改”，函数（）{
if（isMobileLandscapeOnly.matches | | isTabletLandscapeOnly.matches）{
桌面选项卡（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
}else if（IsMobilePortraytonly.matches | | IsTabletPortraytonly.matches）{
mobiletab（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
}else if（isDesktop）{
桌面选项卡（）；
}
}，假）；
if（isMobileLandscapeOnly.matches | | isTabletLandscapeOnly.matches）{
//警报（“手机/平板电脑（肖像）”；
桌面选项卡（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
//控制台日志（原始数据库）；
}else if（IsMobilePortraytonly.matches | | IsTabletPortraytonly.matches）{
//警报（“手机/平板电脑（肖像）”；
mobiletab（）；
$（“#tab_description h6”）。打开（“单击，触摸结束”，tabClick）；
}else if（isDesktop）{
//警报（“桌面”）；
桌面选项卡（）；
}
});

更新

---

我刚刚在手机上玩了另一个游戏：如果我更改标签并向下滑动内容，就可以了，再次更改并向下滑动就可以了。似乎如果我开始刷回它，然后重置，关闭和打开第一个；这真的很奇怪。

当只刷起来的时候真是太奇怪了。。。这对我来说肯定是新的！我已经找出了问题的原因，这是调整大小事件。。。我想只检查宽度调整尺寸会很好吗？仍然有一些问题，但没有那么糟糕，如果有人能帮我买一个合适的夹具，那就太好了：）提前谢谢！嗨，James，这听起来可能很难看，但实际上，如果你有时间压力，你应该停止自己在代码中处理resize和orientationchange，因为这将是一个永无止境的故事。设备有不一致的行为，所以尽可能少写代码，只使用CSS。只要我的两分钱就可以帮助你。短链接提供的线索可能是，也可能不是你一年前提到的。无论哪种方式，问题都需要一个永久性的链接，而外部链接并不是一个很好的替代品，因为它们很容易断开（）。

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

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

  //return false;
}

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

  } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
    mobileTabs();
    $('#tab_description h6').on("click, touchend", 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, touchend", tabClick);

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

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

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

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

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

});