添加動態內容時更改邊欄高度

我有一個'粘性側邊欄導航'，相對於#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');函數添加到點擊函數中，並且它不會刷新到新的高度。我嘗試了一些其他的可能性，但沒有運氣。

來源

2011-11-29 Tom

只是爲了讓大家知道我找到了一個解決方案...瞭解了很多，但代碼在下面。

我基本上在點擊必須設置側邊欄高度回到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>

來源

2011-12-01 12:29:22 Tom

我相信你可以寫

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

讓我知道它的工作。

來源

2011-11-29 13:38:41 Manticore

嗨怪獸感謝您的幫助，但不幸的是這沒有工作，它不會觸發對手風琴斷裂的新高度，也撥動。我看看你雖然我認爲它沒有正確觸發，也許我需要寫一條語句，在.click之前找到高度，然後在.click之後，然後相應地修改css，實際上我已經將變化用於'var curHeight = parseInt（$（「section＃main-container」）。height（））， newHeight = Math.ceil（curHeight/10）* 10 - 5; $（「＃sidebar」）。height（newHeight）;'但不是因爲我不明白curHeight – Tom

哦，並且你對第一部分manticore是正確的！感謝您的簡化代碼 – Tom

添加動態內容時更改邊欄高度

回答

相關問題