添加动态内容时更改侧边栏高度
[英]Changing sidebar height when dynamic content is added
问题描述
我有一个“粘性侧边栏导航”，它位于绝对相对于#sidebar div的位置，所以它沿着左侧的页面向下，并且始终可用。 为了完成这项工作，我不得不在侧边栏添加一个高度，所以我使用了一些代码来动态地找到容器的高度。 这是我使用的代码：
<script type="text/javascript">
function matchColHeights(col1, col2) {
var col1Height = $(col1).height();
var col2Height = $(col2).height();
if (col1Height > col2Height) {
$(col1).height(col2Height);
} else {
$(col1).height(col2Height);
}
}
$(document).ready(function() {
matchColHeights('#sidebar', 'section#main-container');
})
</script>
目前#sidebar DIV坐在部分称为内部section#maincontainer 。 下面是一个非常简化的html版本。
<body>
<header>Header content</header>
<section id="main-container">
<div id="sidebar">
<ul>
This is the floated ul
<ul>
</div>
<div class="content">
This is where the content of the page sits
</div>
<div class="content2">
This is where the content of the page sits (because of the design there are often more than one divs floated right
<div>Within the content divs are potential expanding divs (accordions and tabs that change size)</div>
</div>
</section>
<footer>Footer content</footer>
</body>
所以我遇到的问题是内容区域中有可扩展的内容（制表符和手风琴），当内容扩展时，jQuery不会将侧边栏的高度更新为新的高度（这个新的高度可能更短或更长）比原来的高度）。 我已经尝试将该函数添加到我的手风琴的.click()处理程序中（尚未尝试使用标签）但这里是用于放弃我的手风琴的代码：
<!--Content Accordion-->
<script type="text/javascript">
$(document).ready(function() {
$('div.content-accordion> div').hide();
$('div.content-accordion> h4').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
$matchColHeights('#sidebar', 'section#main-container');
});
} else {
$nextDiv.slideToggle('fast');
$matchColHeights('#sidebar', 'section#main-container');
}
});
});
</script>
如你所见，我可以添加$matchColHeights('#sidebar', 'section#main-container'); 函数进入点击功能，它仍然没有刷新到新的高度。 我尝试过其他一些没有运气的可能性。
2 个解决方案
解决方案1
2 已采纳 2011-12-01 12:29:22
只是为了让每个人都知道我找到了一个解决方案...有很多乱七八糟但是代码在下面。
我基本上在点击时必须将侧边栏高度设置为0，并创建一个函数，找到＃main-container部分的新高度，然后将其作为css高度应用于侧边栏。 这改变了侧边栏的高度就好了，但是粘性侧边栏没有重新调整到新的高度，所以我只是粘贴了我的粘性侧边栏的代码（以$（“旁边”）开头的代码到函数中它刷新就好了。感谢那些有帮助的人。
<!--Content Accordian-->
<script type="text/javascript">
$(document).ready(function() {
$('div.content-accordian> div').hide();
$('div.content-accordian> h4').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast', function() {
// START CHANGE SIDEBAR HEIGHT
$("#sidebar").css({ height: 0});
newheight = $("section#main-container").height();
$("#sidebar").css({ height: newheight});
$("aside").stickySidebar({
timer: 500
, easing: "easeInOutQuint"
, constrain: true
});
});
// END CHANGE SIDEBAR HEIGHT
});
} else {
$nextDiv.slideToggle('fast', function() {
// START CHANGE SIDEBAR HEIGHT
$("#sidebar").css({ height: 0});
newheight = $("section#main-container").height();
$("#sidebar").css({ height: newheight});
$("aside").stickySidebar({
timer: 500
, easing: "easeInOutQuint"
, constrain: true
});
});
// END CHANGE SIDEBAR HEIGHT
}
});
});
</script>
解决方案2
0 2011-11-29 13:38:41
我相信你可以写
if (col1Height !== col2Height) {
$(col1).height(col2Height);
}
代替
if (col1Height > col2Height) {
$(col1).height(col2Height);
} else {
$(col1).height(col2Height);
}
但这不会解决你的问题。
您可能必须从回调内部触发matchColHeights()函数，如下所示：
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast', function() {
$matchColHeights('#sidebar', 'section#main-container');
});
});
} else {
$nextDiv.slideToggle('fast', function() {
$matchColHeights('#sidebar', 'section#main-container');
});
}
让我知道它是否有效。
jQuery $（window）.height错误，动态添加了内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.