适配打印模式
parent
4bcebf588e
commit
dcf17403b9
@ -1,33 +1,54 @@
|
||||
(function($) {
|
||||
$('.isekai-collapse').addClass('animate')
|
||||
|
||||
function expand(titleElem, containerElem, contentElem) {
|
||||
containerElem.prop('open', true);
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
containerElem.css('height', collapsedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
});
|
||||
}
|
||||
function collapse(titleElem, containerElem, contentElem) {
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
containerElem.addClass('closing').css('height', collapsedHeight);
|
||||
setTimeout(function() {
|
||||
containerElem.prop('open', false).removeClass('closing');
|
||||
}, 260);
|
||||
});
|
||||
}
|
||||
|
||||
$('.isekai-collapse .isekai-collapse-title').on('click', '', function(e) {
|
||||
e.preventDefault();
|
||||
var titleElem = $(this);
|
||||
var containerElem = titleElem.parent('.isekai-collapse');
|
||||
var contentElem = containerElem.find('.isekai-collapse-content');
|
||||
if (containerElem.prop('open')) { // 需要收起
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
console.log('expandedHeight', expandedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
console.log('collapsedHeight', collapsedHeight);
|
||||
containerElem.addClass('closing').css('height', collapsedHeight);
|
||||
setTimeout(function() {
|
||||
containerElem.prop('open', false).removeClass('closing'); //.css('height', 'auto');
|
||||
}, 260);
|
||||
});
|
||||
collapse(titleElem, containerElem, contentElem);
|
||||
} else { // 需要展开
|
||||
containerElem.prop('open', true);
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
containerElem.css('height', collapsedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
/*setTimeout(function() {
|
||||
containerElem.css('height', 'auto');
|
||||
}, 260);*/
|
||||
});
|
||||
expand(titleElem, containerElem, contentElem);
|
||||
}
|
||||
});
|
||||
|
||||
function onMediaQueryChanged(mediaQueryList) {
|
||||
console.log('mediaQuery', mediaQueryList.matches);
|
||||
if (mediaQueryList.matches) {
|
||||
// 打印时展开所有折叠
|
||||
$('.isekai-collapse').each(function() {
|
||||
$(this).prop('open', true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (window.matchMedia) {
|
||||
var mediaQueryList = window.matchMedia('print');
|
||||
onMediaQueryChanged(mediaQueryList);
|
||||
mediaQueryList.addEventListener('change', function(e) {
|
||||
onMediaQueryChanged(mediaQueryList);
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
|
Loading…
Reference in New Issue