具有多个切换的div的高度

时间:2016-05-10 17:01:07

标签: javascript jquery html css

我尝试编写一段代码,如果展开的内容高于窗口高度,则会向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"});
        }
      });

  });

当单击一个切换时,此方法有效,但是当一个切换打开而另一个切换时,侧边高度默认为小于窗口高度的看似任意数字。

任何帮助将不胜感激。

谢谢。

0 个答案:

没有答案