1

希望能得到一些帮助,我不是 jQuery 方面的专家,所以请多多包涵。

我有 2 个 expandable/collapsible<div>包含动态搜索优化链接,默认折叠状态显示前 12 个链接,并带有一个“显示更多”切换按钮,单击该按钮会展开<div>以显示完整的链接集。

我需要知道这些的高度<div>,我可以这样得到:

var heightRefLinks = $('.search-refine').outerHeight(true);

但这仅在单击“显示更多”切换按钮之前捕获折叠高度,我如何也获得展开高度?

我需要这样做的原因是因为我有一个工具栏元素,一旦你滚动到它,它就会“粘”到视口的顶部,工具栏只需要“粘”到视口,而搜索结果列表是在视图中,一旦它们不在视图中,工具栏就会从视口中“脱离”。为了“不粘”,我必须为插件选项设置一个 px 值:bottomBound这是从视口底部到列表底部的 px 高度。我在列表下方有一些元素,它们都有静态高度,所以让“不粘”行为起作用并不麻烦,但随后出现了前面提到的可扩展/可折叠<div>的。

编辑:包括使用此插件的 jQuery:http: //themousepotatowebsite.co.za/introducing-the-stick-to-top-plugin/

// get the heights of various elements
var heightToolbar = $('.sticky-panel-toolbar').outerHeight(true);
var heightContentMeta = $('.property-listing-meta').outerHeight(true);
var heightLastPropItem = $('.property-listing:last-child > .property-tile:last-   child').outerHeight(true);
var heightFooter = $('.footer').outerHeight(true); 
// set bottom gaps
var bottomGap = heightFooter + 32;
var bottomGapToolbar = heightToolbar + heightFooter + heightContentMeta +    heightLastPropItem;

// 'Toolbar - Search Results' version
$('.sticky-panel-toolbar-search').stickToTop({
bottomBound: bottomGapToolbar,
onStick: function() {
    $(this).addClass('stuck');
},
onDetach: function() {
    $(this).removeClass('stuck');
}
});

heightContentMeta是我正在努力解决的问题,因为这是<div>搜索结果列表之后的所有内容的容器,其中包含<div>2 个可扩展/可折叠<div>的。我还在<iframe>那里注入了一个 Google Adwords,我也无法获得高度,但我想首先关注可扩展/可折叠<div>的。

4

1 回答 1

3

这应该给你元素内容的高度。

$(".search-refine")[0].scrollHeight

演示

于 2012-07-02T14:57:35.013 回答