添加动态内容时更改边栏高度

问题描述：

我有一个'粘性侧边栏导航'，相对于#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格坐在称为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');函数添加到点击函数中，并且它不会刷新到新的高度。我尝试了一些其他的可能性，但没有运气。

答

只是为了让大家知道我找到了一个解决方案...了解了很多，但代码在下面。

我基本上在点击必须设置侧边栏高度回到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>

答

我相信你可以写

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'); 
    }); 
}

让我知道它的工作。

嗨怪兽感谢您的帮助，但不幸的是这没有工作，它不会触发对手风琴断裂的新高度，也拨动。我看看你虽然我认为它没有正确触发，也许我需要写一条语句，在.click之前找到高度，然后在.click之后，然后相应地修改css，实际上我已经将变化用于'var curHeight = parseInt（$（“section＃main-container”）。height（））， newHeight = Math.ceil（curHeight/10）* 10 - 5; $（“＃sidebar”）。height（newHeight）;'但不是因为我不明白curHeight – Tom

哦，并且你对第一部分manticore是正确的！感谢您的简化代码 – Tom

添加动态内容时更改边栏高度

相关推荐