如何解决高度扩展时获取flexbox流的元素ouf
在下面的代码段中,我已将事件处理程序附加到第一个按钮上。
我还创建了this codesandbox。
我的问题是,当单击按钮时,div会展开以显示更多文本。
问题在于,因为所有div都位于flexbox容器中,所以当div扩展时,由于文本框容器的高度已更改,因此它会按下所有其他按钮。
flexbox子级有可能在不使所有flexbox子级都扩展的情况下扩展。
我需要将所有按钮都排列在同一级别,并且只应显示一个格即可展开。
document.querySelector("#btn").addEventListener("click",() => {
document
.querySelector(".detail-cards-module--expandable__content--kl2yu")
.classList.add("open");
document
.querySelector(".detail-cards-module--header--X5tBT")
.classList.add("closed");
});
document.querySelector("#btnClose").addEventListener("click",() => {
document
.querySelector(".detail-cards-module--expandable__content--kl2yu")
.classList.remove("open");
document
.querySelector(".detail-cards-module--header--X5tBT")
.classList.remove("closed");
});
.detail-cards-module--card-layout {
display: flex;
position: relative;
padding-top: 1rem;
padding-bottom: 5rem;
}
.detail-cards-module--card {
border: none;
background: transparent;
display: flex;
text-align: center;
justify-content: space-between;
flex: 1 1;
margin-top: 2rem;
overflow: hidden;
}
.detail-cards-module--header--X5tBT {
display: flex;
flex-direction: column;
flex: 1 1;
max-height: 100%;
border: 1px solid green;
position: relative;
}
.detail-cards-module--statistic--23zwO {
color: #174383;
font-size: 2rem;
font-family: "Lora",serif;
margin-bottom: 2rem;
margin-top: 0.75rem;
}
.detail-cards-module--details--C_LmH {
flex: 1 1;
}
button {
z-index: 1;
border: none;
background: transparent;
outline: none;
cursor: pointer;
margin: 1rem 0 1rem;
}
.detail-cards-module--header--X5tBT.closed,.detail-cards-module--expandable__content--kl2yu {
opacity: 0;
width: 0;
max-height: 0;
}
.detail-cards-module--expandable__content--kl2yu.open {
width: 90%;
max-height: 100%;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="detail-cards-module--card-layout">
<div class="detail-cards-module--card">
<div class="detail-cards-module--header--X5tBT">
<h3>
<p class="rich-text-render-module--para--20qj8">Weight</p>
<p class="rich-text-render-module--para--20qj8">loss</p>
</h3>
<div class="detail-cards-module--statistic--23zwO">93%</div>
<div class="detail-cards-module--details--C_LmH">
<p class="rich-text-render-module--para--20qj8">
decrease in members living with obesity
</p>
</div>
<button id="btn" type="button">open</button>
</div>
<div class="detail-cards-module--expandable__content--kl2yu">
<div>
<p class="rich-text-render-module--para--20qj8">
Doggo ipsum smol snoot shoob. Big ol pupper shoober big ol pupper
I am bekom fat,aqua doggo very jealous pupper heckin good boys
many pats,puggo wow such tempt porgo. Puggorino waggy wags boof
ruff what a nice floof,wow very biscit long bois yapper. Heckin
good boys and girls such treat heckin good boys borking doggo,heck extremely cuuuuuute. Borking doggo dat tungg tho thicc ur
givin me a spook,you are doing me a frighten. Bork such treat
length boy doing me a frighten very good spot pats,boofers vvv
fat boi. Tungg shibe smol borking doggo with a long snoot for pats
noodle horse,pupperino yapper. Aqua doggo puggo much ruin diet
mlem heckin good boys and girls pupperino you are doing me a
frighten such treat,doggorino heckin angery woofer sub woofer fat
boi puggorino.
</p>
</div>
<button id="btnClose" type="button">close</button>
</div>
</div>
<div class="detail-cards-module--card">
<div class="detail-cards-module--header--X5tBT">
<h3>
<p class="rich-text-render-module--para--20qj8">Free from</p>
<p class="rich-text-render-module--para--20qj8">medication</p>
</h3>
<div class="detail-cards-module--statistic--23zwO">96%</div>
<div class="detail-cards-module--details--C_LmH">
<p class="rich-text-render-module--para--20qj8">
of members have safely come off all medication under medical
supervision
</p>
</div>
<button id="button1" type="button">open</button>
<div> </div>
</div>
<div class="detail-cards-module--expandable__content--kl2yu">
<div>
<p class="rich-text-render-module--para--20qj8">
Doggo ipsum smol snoot shoob. Big ol pupper shoober big ol pupper
I am bekom fat,doggorino heckin angery woofer sub woofer fat
boi puggorino.
</p>
</div>
<button type="button">close</button>
</div>
</div>
<div class="detail-cards-module--card">
<div class="detail-cards-module--header--X5tBT">
<h3>
<p class="rich-text-render-module--para--20qj8">Controlling</p>
<p class="rich-text-render-module--para--20qj8">blood sugar</p>
</h3>
<div class="detail-cards-module--statistic--23zwO">89%</div>
<div class="detail-cards-module--details--C_LmH">
<p class="rich-text-render-module--para--20qj8">
of patients see a X% drop in their HbA1c within X weeks
</p>
</div>
<button type="button">open</button>
<div> </div>
</div>
<div class="detail-cards-module--expandable__content--kl2yu">
<div>
<p class="rich-text-render-module--para--20qj8">
Doggo ipsum smol snoot shoob. Big ol pupper shoober big ol pupper
I am bekom fat,doggorino heckin angery woofer sub woofer fat
boi puggorino.
</p>
</div>
<button type="button">close</button>
</div>
</div>
<div class="detail-cards-module--card">
<div class="detail-cards-module--header--X5tBT">
<h3>
<p class="rich-text-render-module--para--20qj8">Lowering</p>
<p class="rich-text-render-module--para--20qj8">blood pressure</p>
</h3>
<div class="detail-cards-module--statistic--23zwO">92%</div>
<div class="detail-cards-module--details--C_LmH">
<p class="rich-text-render-module--para--20qj8">
of patients see their blood pressure go from risky to normal
</p>
</div>
<button type="button">open</button>
<div> </div>
</div>
<div class="detail-cards-module--expandable__content--kl2yu">
<div>
<p class="rich-text-render-module--para--20qj8">
Doggo ipsum smol snoot shoob. Big ol pupper shoober big ol pupper
I am bekom fat,doggorino heckin angery woofer sub woofer fat
boi puggorino.
</p>
</div>
<button type="button">close</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。