我尝试编写一段代码,如果展开的内容高于窗口高度,则会向div添加滚动条。
html的结构大致如下:
<nav class="col-md-2 col-sm-3 no-padding">
<div class="nav-container">
<div class="tocify1">
<ul class="tocheader nav nav-list">
<li class="multi flex-container active-top"><a class="open"><i class="fa fa-caret-right fa-rotate-90" aria-hidden="true"></i></a><a href="link">Top Link</a></li>
<ul id="" class="tocsubheader nav nav-list">
<li class="active"><a href="link">Link 1</a></li>
<li class=""><a href="link">Link 2</a></li>
</ul>
</li>
</ul>
和Css:
.nav-container{position: fixed;}
以下是相关代码:
windowheight = $(window).height();
$('.open').click(function() {
$(this).parent().next('.tocsubheader').slideToggle().promise().done(function(){
sidenav = $('.tocify1').height();
if (windowheight < sidenav){
$('.tocify1').css({'height': windowheight, "overflow-y" : "scroll"});
}
else{
$('.tocify1').css({'height':'100%', "overflow-y" : "hidden"});
}
});
});
当单击一个切换时,此方法有效,但是当一个切换打开而另一个切换时,侧边高度默认为小于窗口高度的看似任意数字。
任何帮助将不胜感激。
谢谢。