Question

我有一组div，如下所示，

summary: 0[
body: /

我有一个响应，可能有发票，索赔或草稿类型。如果我在响应中得到“草稿”那么我将只显示声明div而其余两个将被隐藏，但问题是上面的两个div是隐藏的还占用空间（即，从顶部留下间隙然后显示草案div。）。

我正在使用CSS，如下所示

<div id="invoice"></div>
<div id="claim"></div>
<div id="draft"></div>

并隐藏它，

 $("#draft").css('flex','flex-wrap'); // for showing the content in a straight line.
 $("#draft").css('display','block');

同样适用于所有id。我是新手，所以如果我错了，请纠正我。提前谢谢。

Answer 1

如果我理解你的问题，下面的回答可能会有所帮助。

＆＃13;

var filterredList = courseList.filter(course => {
     return course.type.filter(type => type.slug == that.userData.type).length > 0 
         && course.difficulty.filter(difficulty => difficulty.slug == that.userData.difficulty).length > 0
});

＆＃13;

div {
  width: 40px;
  height: 80px;
}
div.anyOne:empty {
  display: none
}

＆＃13;

Answer 2

使用display: none;完全隐藏元素并留空。

使用visiblity: hidden隐藏元素，同时留下原来的空间。

＆＃13;

div{
  background-color:red;
  width: 150px;
  height: 50px;
  border: solid 1px black;
}

#draft {
    display: none;
}

＆＃13;

<div id="invoice">invoice</div>
<div id="claim">claim</div>
<div id="draft">draft</div>
<div id="another">another</div>

＆＃13;

如何删除隐藏div所占用的空间

2 个答案: