单击时可折叠 div 高度问题
Collapsible div height issue on Click
我遇到了一个关于折叠式高度的奇怪问题 div。即使在 div 关闭/折叠后,div 的展开高度仍然存在。请参考下图
Javascript 点击时将高度添加到 li。作为参考,这里是检查元素部分。
<ul id="og-grid" class="og-grid">
<li><a target="_blank" href="www.somewebsite.com" data-
largesrc="uploadimage/project/sfs.jpg" data-title="Website Redesign of "
data-type="WebSite" data-description="Website Redesign "><img
src="uploadimage/project/thumb/sfs.jpg" alt="img00"></a></li>
<li style="**transition: height 350ms ease 0s; height: 719px;**"
class="">
<a href="#/" data-largesrc="uploadimage/project/notouch.jpg" data-
title="No Touch" data-type="Mobile Application" data-description="Notouch
is a simple but useful app that helps you to lock the screen temporarily
to prevent unauthorized clicks or to go to other apps from the current
screen. This is especially useful when you give your Phone to kids to view
videos or YouTube. This app will disable the touch facility temporarily.">
<img src="uploadimage/project/thumb/notouch.jpg" alt="img01"></a></li>
<li><a target="_blank" href="www.fhjgh.com" data-
largesrc="uploadimage/project/2capture.jpg" data-title="Test" data-
type="WebSite" data-description="hI there njwehkasd kahffhsaf sdkfhsdf
saklhflkdshf sdhfksdhf kldsh"><img
src="uploadimage/project/thumb/2capture.jpg" alt="img02"></a></li>
<li><a target="_blank" href="http://www.jhghjghjg.in" data-
largesrc="uploadimage/project/green.jpg" data-title="Green Homes" data-
type="WebSite" data-description=", due to better usage of pictures"><img
src="uploadimage/project/thumb/green.jpg" alt="img03"></a></li>
<li><a href="#/" data-largesrc="uploadimage/project/leonardo.jpg" data-
title="Leonardo" data-type="Logo Design" data-description="The Logo design
. We have used the negative space design concept here to make the L hidden
inside a box ( Box represent a furniture)"><img
src="uploadimage/project/thumb/leonardo.jpg" alt="img04"></a></li>
</ul>
Javascript 部分(我相信)是这样的。
open: function () {
setTimeout($.proxy(function () {
// set the height for the preview and the item
this.setHeights();
// scroll to position the preview in the right place
this.positionPreview();
}, this), 25);
},
close: function () {
var self = this,
onEndFn = function () {
if (support) {
$(this).off(transEndEventName);
}
self.$item.removeClass('og-expanded');
self.$previewEl.remove();
};
setTimeout($.proxy(function () {
if (typeof this.$largeImg !== 'undefined') {
this.$largeImg.fadeOut('fast');
}
this.$previewEl.css('height', 0);
// the current expanded item (might be different from this.$item)
var $expandedItem = $items.eq(this.expandedIdx);
$expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
}, this), 25);
return false;
},
calcHeight: function () {
var heightPreview = winsize.height - this.$item.data('height') - marginExpanded,
itemHeight = winsize.height;
if (heightPreview < settings.minHeight) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight;
},
setHeights: function () {
var self = this,
onEndFn = function () {
if (support) {
self.$item.off(transEndEventName);
}
self.$item.addClass('og-expanded');
};
this.calcHeight();
this.$previewEl.css('height', this.height);
this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
},
positionPreview: function () {
// scroll page
// case 1 : preview height + item height fits in window´s height
// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
var position = this.$item.data('offsetTop'),
previewOffsetT = this.$previewEl.offset().top - scrollExtra,
scrollVal = this.height + this.$item.data('height') + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - (winsize.height - this.height) : previewOffsetT;
$body.animate({ scrollTop: scrollVal }, settings.speed);
},
setTransition: function () {
this.$previewEl.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
},
getEl: function () {
return this.$previewEl;
}
}
return {
init: init,
addItems: addItems
};
})();
请指教,如何解决这个问题。 (是否有 CSS 或 Javascript 方式)
尝试在动画结束时执行命令javascript:在包含打开图像的容器上删除 (),或清空 ()。如果在尝试这些命令后你仍然看到错误的高度,这意味着你已经在容器上应用了宽度/高度属性,所以你必须删除它们,将它们的值更改为 ''.
编辑:
close: function () {
....
setTimeout($.proxy(function () {
document.getElementsByClassName('og-expander')[0].parentElement.removeAttribute("style");
if (typeof this.$largeImg !== 'undefined') {
....
我已经测试过,有效。
我遇到了一个关于折叠式高度的奇怪问题 div。即使在 div 关闭/折叠后,div 的展开高度仍然存在。请参考下图
Javascript 点击时将高度添加到 li。作为参考,这里是检查元素部分。
<ul id="og-grid" class="og-grid">
<li><a target="_blank" href="www.somewebsite.com" data-
largesrc="uploadimage/project/sfs.jpg" data-title="Website Redesign of "
data-type="WebSite" data-description="Website Redesign "><img
src="uploadimage/project/thumb/sfs.jpg" alt="img00"></a></li>
<li style="**transition: height 350ms ease 0s; height: 719px;**"
class="">
<a href="#/" data-largesrc="uploadimage/project/notouch.jpg" data-
title="No Touch" data-type="Mobile Application" data-description="Notouch
is a simple but useful app that helps you to lock the screen temporarily
to prevent unauthorized clicks or to go to other apps from the current
screen. This is especially useful when you give your Phone to kids to view
videos or YouTube. This app will disable the touch facility temporarily.">
<img src="uploadimage/project/thumb/notouch.jpg" alt="img01"></a></li>
<li><a target="_blank" href="www.fhjgh.com" data-
largesrc="uploadimage/project/2capture.jpg" data-title="Test" data-
type="WebSite" data-description="hI there njwehkasd kahffhsaf sdkfhsdf
saklhflkdshf sdhfksdhf kldsh"><img
src="uploadimage/project/thumb/2capture.jpg" alt="img02"></a></li>
<li><a target="_blank" href="http://www.jhghjghjg.in" data-
largesrc="uploadimage/project/green.jpg" data-title="Green Homes" data-
type="WebSite" data-description=", due to better usage of pictures"><img
src="uploadimage/project/thumb/green.jpg" alt="img03"></a></li>
<li><a href="#/" data-largesrc="uploadimage/project/leonardo.jpg" data-
title="Leonardo" data-type="Logo Design" data-description="The Logo design
. We have used the negative space design concept here to make the L hidden
inside a box ( Box represent a furniture)"><img
src="uploadimage/project/thumb/leonardo.jpg" alt="img04"></a></li>
</ul>
Javascript 部分(我相信)是这样的。
open: function () {
setTimeout($.proxy(function () {
// set the height for the preview and the item
this.setHeights();
// scroll to position the preview in the right place
this.positionPreview();
}, this), 25);
},
close: function () {
var self = this,
onEndFn = function () {
if (support) {
$(this).off(transEndEventName);
}
self.$item.removeClass('og-expanded');
self.$previewEl.remove();
};
setTimeout($.proxy(function () {
if (typeof this.$largeImg !== 'undefined') {
this.$largeImg.fadeOut('fast');
}
this.$previewEl.css('height', 0);
// the current expanded item (might be different from this.$item)
var $expandedItem = $items.eq(this.expandedIdx);
$expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
}, this), 25);
return false;
},
calcHeight: function () {
var heightPreview = winsize.height - this.$item.data('height') - marginExpanded,
itemHeight = winsize.height;
if (heightPreview < settings.minHeight) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight;
},
setHeights: function () {
var self = this,
onEndFn = function () {
if (support) {
self.$item.off(transEndEventName);
}
self.$item.addClass('og-expanded');
};
this.calcHeight();
this.$previewEl.css('height', this.height);
this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn);
if (!support) {
onEndFn.call();
}
},
positionPreview: function () {
// scroll page
// case 1 : preview height + item height fits in window´s height
// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
var position = this.$item.data('offsetTop'),
previewOffsetT = this.$previewEl.offset().top - scrollExtra,
scrollVal = this.height + this.$item.data('height') + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - (winsize.height - this.height) : previewOffsetT;
$body.animate({ scrollTop: scrollVal }, settings.speed);
},
setTransition: function () {
this.$previewEl.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
},
getEl: function () {
return this.$previewEl;
}
}
return {
init: init,
addItems: addItems
};
})();
请指教,如何解决这个问题。 (是否有 CSS 或 Javascript 方式)
尝试在动画结束时执行命令javascript:在包含打开图像的容器上删除 (),或清空 ()。如果在尝试这些命令后你仍然看到错误的高度,这意味着你已经在容器上应用了宽度/高度属性,所以你必须删除它们,将它们的值更改为 ''.
编辑:
close: function () {
....
setTimeout($.proxy(function () {
document.getElementsByClassName('og-expander')[0].parentElement.removeAttribute("style");
if (typeof this.$largeImg !== 'undefined') {
....
我已经测试过,有效。