我有一个容器 div，里面有另外两个 div。一个是显示在左侧的“Home”，另一个是显示在右侧的“Away”。他们肩并肩。这些 div 内部是其他 div，并且有 Javascript，因此当按下某个元素时，它会使用 CSS 显示来显示/隐藏其他 div。但是，当我隐藏/取消隐藏这些时，父级高度不会调整，因此一旦打开多个 div，您就看不到显示的 div。下面的例子：$("document").ready(function () { setupInjuries();});function setupInjuries() { $(".match-injury").each(function () { var helpIcon = $(this).find(".match-injury-icon"); var shortDescription = $(this).find(".match-injury-shortdescription"); var latestButton = $(this).find(".match-injury-latestbutton"); var longDescription = $(this).find(".match-injury-longdescription"); helpIcon.click(function () { if (shortDescription.css("display") == "none") { shortDescription.css("display", "block"); } else { shortDescription.css("display", "none"); longDescription.css("display", "none"); latestButton.text("SEE LATEST"); } }); latestButton.click(function () { if (longDescription.css("display") == "none") { longDescription.css("display", "block"); $(this).text("HIDE LATEST"); } else { longDescription.css("display", "none"); $(this).text("SEE LATEST"); } }); });}如何根据子容器的高度/显示状态调整容器高度？
1 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
这是因为您已经为父容器指定了高度match-injuries-container。我已经删除了该height属性并添加了min-height属性，并且它对我来说工作正常。如果不需要，您甚至可以完全删除此属性。
$("document").ready(function () {
setupInjuries();
});
function setupInjuries() {
$(".match-injury").each(function () {
var helpIcon = $(this).find(".match-injury-icon");
var shortDescription = $(this).find(".match-injury-shortdescription");
var latestButton = $(this).find(".match-injury-latestbutton");
var longDescription = $(this).find(".match-injury-longdescription");
helpIcon.click(function () {
if (shortDescription.css("display") == "none") {
shortDescription.css("display", "block");
}
else {
shortDescription.css("display", "none");
longDescription.css("display", "none");
latestButton.text("SEE LATEST");
}
});
latestButton.click(function () {
if (longDescription.css("display") == "none") {
longDescription.css("display", "block");
$(this).text("HIDE LATEST");
}
else {
longDescription.css("display", "none");
$(this).text("SEE LATEST");
}
});
});
}
.match-injuries-container {
width: 100%;
/* You can have min-height but not height */
min-height: 135px;
background-color: #e5e5e5;
overflow: hidden;
}
.match-injuries-home {
width: 50%;
float: left;
text-align: center;
display: inline-block;
border-left: 1px solid #9c9c9c;
background-color: #e5e5e5;
}
.match-injuries-away {
width: 50%;
float: right;
text-align: center;
display: inline-block;
border-right: 1px solid #9c9c9c;
background-color: #e5e5e5;
}
.match-injury {
width: 100%;
height: auto;
background-color: #d3d3d3;
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid #9c9c9c;
border: 1px solid #9c9c9c;
border-left: none;
cursor: default;
position: relative;
}
.match-injury-detail {
height: 25px;
padding: 3px 3px 3px 3px;
}
.match-injury-player {
color: #5b5b5b;
}
.match-injury-status {
margin-left: 5px;
color: #d20000;
}
.match-injury-icon {
position: absolute;
right: 5px;
top: 0;
font-size: 15px;
color: #2b3180;
cursor: pointer;
}
.match-injury-descriptions {
padding: 3px 3px 3px 3px;
}
.match-injury-shortdescription {
font-size: 10px;
background-color: #f0f0f0;
height: auto;
padding: 3px 3px 3px 3px;
font-weight: normal;
display: none;
}
.match-injury-longdescription {
font-size: 10px;
background-color: #f0f0f0;
height: auto;
padding: 3px 3px 3px 3px;
font-weight: normal;
font-style: italic;
display: none;
}
.match-injury-latestbutton {
background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);
width: 100%;
height: 18px;
text-align: center;
border: 1px solid #bbbbbb;
font-size: 10px;
font-weight: bold;
cursor: pointer;
padding-top: 2px;
}
.match-injury-border {
width: 100%;
height: 4px;
background-image: linear-gradient(#9a9a9a, white, #9a9a9a);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="match-injuries-container">
<div class="main-header-bar">Injuries</div>
<div class="match-injuries-home">
<div class="match-injury">
<span class="match-injury-player">Player Name 1</span>
<span class="match-injury-status">OUT</span>
<div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
<div class="match-injury-border"></div>
<div class="match-injury">
<span class="match-injury-player">Player Name 2</span>
<span class="match-injury-status">OUT</span>
<span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
<div class="match-injury-border"></div>
<div class="match-injury">
<span class="match-injury-player">Player Name 3</span>
<span class="match-injury-status">OUT</span>
<span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
</div>
<div class="match-injuries-away">
<span style="font-size:13px;">No reported injuries</span>
</div>
</div>
- 1 回答
- 0 关注
- 26 浏览
添加回答
举报
0/150
提交
取消