我刚刚注意到,在移动设备上,当调整为移动设备时,我的选项卡没有单击和更改,想知道是否有人可以看到原因?
我在这里创建了一个小提琴:https://jsfiddle.net/a6k70p0L/2/
在桌面视图中工作正常,但是当调整大小时,单击事件似乎确实会触发和更改。
.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();
}
});
$('ul.tabs').each...
包装在函数中,并在完成移动设备中所有 a/h6 标签的附加后调用该函数。或者在 each 语句之前调用追加函数。
each 语句将触发并应用于 DOM 中当前可用的所有内容,因为您的追加函数尚未启动...每个语句都不知道它在那里。然后你的附加内容发生在你的移动函数中,每个语句不知道它的存在(因为它是在移动函数之前触发的)。
编辑 - 工作答案
在此处查看更新的小提琴:https://jsfiddle.net/a6k70p0L/6/
我在下面的评论中提到了我的更改。
append()
与 onclick() 这样的事件一起使用时delegate()
你应该使用 jQuery 函数。
例:
$("body").delegate('.class', 'click' ,function()
{
//do something
});
这是非常有帮助的。您可以在Stackoverflow上的其他帖子中阅读此用法的原因。