jquery - 打开下拉菜单为窗口的 100% 高度

Question

我有一个正在制作的过滤应用程序，它使用侧边栏来显示过滤选项。目前我有它，所以如果它们打开，它们会占用一定的空间，但我希望当它们打开时，未打开的选项卡位于窗口底部。

所以如果我要打开第一个选项卡，它会看起来像这样

 __________
|__BRANDS__|
| Brand 1  |
| Brand 2  |
|          |
|          |
|__________|
|_FILTER 2_|
|_FILTER 3_|
|_FILTER 4_|
|_FILTER 5_|

(我希望该图有意义)

然后如果我要打开，说 filter 2 我希望它像这样:

 __________
|__BRANDS__|
|_FILTER 2_|
| EFFECT 1 |
| EFFECT 2 |
|          |
|          |
|__________|
|_FILTER 2_|
|_FILTER 3_|
|_FILTER 4_|
|_FILTER 5_|

这样，任何未使用的(在已使用的下方)都会被推到浏览器的底部。

现在，我把它设置成这样:

HTML:

<div class="filter-sect">
    <div class="collapse">
        <p class="heading">Brands ({{countUniqueBrands()}})</p>
        <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="collapse">
        <p class="heading">Percolator</p>
        <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="collapse">
        <p class="heading">Color</p>
        <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

CSS:

.collapse{
  width:100%;
}

.container {
margin:0;
padding:0;
width:500px;
}

.heading {
margin:0px;
color:#9c9c9d;
padding:7px 28px;
cursor:pointer;
position: relative;
font-size:17px;
font-family:sans-serif;
  font-weight:200;
}

.heading:hover{
  color:#FFF;
  background:#a8a8a7;
}

.active-tab, .active:hover{
  background:#FFF;
  color:#54ac51;
  font-size:20px;
  border-top:#dddddc 1px solid;
  border-bottom:#dddddc 1px solid;
  width:100%;
}

.content {
padding:15px 10px 10px;
  background:#e5e5e4;
}

JS:

$('.heading').click(function(){
  $(this).toggleClass('active-tab');
});


$(document).ready(function() {
  $(".content").hide();

  $(".heading").click(function()
                      {
    $(this).next(".content").slideToggle(450);
  });

});

此外，对于那些喜欢动手的人，这里有一个缩小版的 js-fiddle 和 codepen 我目前正在工作。

---

我尝试了一些东西，主要是关于包装在另一个 div 中打开的 div 然后为那个 div 设置高度，并告诉打开的 div 是 height:100% 或 height:100vh。

没有真正解决这个问题，所以如果你们能给我指出正确方向的任何帮助，我们将不胜感激。

谢谢!

Answer 1

最难的部分是找到可用空间的高度值来扩展菜单项。

之所以如此困难，是因为您的菜单与浏览器窗口一样高，并且浏览器大小因用户和设备而异。我知道解决这个问题的唯一方法是使用一种昂贵的函数 scroll和 resize .

var  closedTabHeight = 20, //This is a static number that works if all your tabs are of equal height in closed position
    closedMenuHeight = closedTabHeight * $('.collapse').length, //height times amount of tabs
    availableHeight= $(window).height - closedMenuHeight;

$(window).on('scroll resize', function () {
   availableHeight= $(window).height - closedMenuHeight;
   setMenuHeight(); //this one explained below
});

这会给您留下一个数字，您可以将其应用于打开的选项卡。但是由于我们需要在点击发生时和窗口调整大小时更改打开的选项卡高度，所以让我们将所有这些放在我们同时调用的函数中 resize , 和 click .

function setMenuHeight(){
   $('.active-tab').css('height', availableHeight);
}

$(".collapse").click(function(){
    setMenuHeight(); // makes sure the active tab gets the right height

    var thisContent = $(this).find('.content');

    if($(thisContent).is(':visible')){
        $(thisContent).slideUp(450); //close the tab if its the one already open

    }else{
        $('.content:visible').slideUp(450);
        $(thisContent).slideDown(450);
    }
});