我已经提供了一个JS小提琴,但它的目标是移动,所以它的工作减少窗口宽度或开放控制台,但问题是;
它可以打开默认选项卡及其内容fine,单击另一个选项卡,然后打开并向下滚动。这是好的,但它不是关闭前一个选项卡,当我点击关闭将关闭所有打开,使可用性不完美。
有什么想法吗?我认为有问题的部分在这个函数中:
var tabClick = function(x) {
我认为我犯了错
小提琴:https://jsfiddle.net/6wttzcg5/5/
JS公司:
$(document).ready(function() {
var originalTabs = $('.originalTabs').html();
var windowWidth = 0;
var time = 500;
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 tap', function() {
tabClick($(this));
});
});
$('#tab_description h6').first().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");
//console.log(x);
// Open accordion item if previously closed
if (!isOpen) {
$(x).nextUntil('h6').slideDown(time);
$(x).nextUntil(accordionContent).slideDown(time);
} else {
accordionContent.slideUp(time);
}
scrollToTab($(x));
}
function scrollToTab(tabScrollTo){
$("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, time);
}
//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;
}
});
});
最佳答案
对于任何想知道解决方案的人来说:
小提琴:https://jsfiddle.net/6wttzcg5/12/
JS公司:
$(document).ready(function() {
var originalTabs = $('.originalTabs').html();
var windowWidth = 0;
var swapSpeed = 300;
var scrollSpeed = 200;
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 tap', function() {
tabClick($(this));
});
});
$('#tab_description h6').first().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).hasClass("active");
//console.log(x);
// Open accordion item if previously closed
if (isOpen) {
$('#tab_description h6').removeClass("active");
$(accordionContent).slideUp(swapSpeed);
$(x).addClass("active");
$(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
scrollToTab($(x));
});
}
return false;
}
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
//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();
} */
mobileTabs();
});
//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();
} */
mobileTabs();
$('#tab_description h6').on("click tap", tabClick);
windowWidth = $(window).width();
delete windowWidth;
}
});
});