我想在可折疊 div 的下部創建一個帶有一排按鈕的可折疊“卡片”。有點像推特卡，底部有一排按鈕。在這個例子中，卡片本身是可點擊的（我希望它是可折疊的）。就我而言，我希望在右側有一個小箭頭，指示可折疊 div 是折疊還是展開。此外，我想在可折疊的 div 中（在按鈕行上方）撰寫多個段落。
我嘗試了幾件事，但我還沒有弄清楚如何做到這一點。它不應該太難，但我不是一個很好的編碼器，所以如果有人能提供幫助，我將非常感激。
我已經使用引導程式嘗試了以下操作
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="accordion-item">
<div class="accordion-button block " type="button">
<a class="overlay" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"></a>
<div class="inner">
<p>This entire box is collapsible.</p>
<p>But somehow the arrow on the right side does not turn</p>
<a href="https://duckduckgo.com/">I'm a clickable link that could also have been a button</a>
</div>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Exra information about the thing written above.
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>不幸的是，右側的箭頭不可點擊且不旋轉。
uj5u.com熱心網友回復：
我建議您閱讀此頁面的 Bootstrap 檔案： https ://getbootstrap.com/docs/5.1/components/collapse/
這里有你需要的一切。
uj5u.com熱心網友回復：
這是一個折疊的例子，但如果你想將點擊者重定向到作者的頁面，他將看不到折疊
let card = document.querySelector('.card');
card.addEventListener('click', ()=>{
card.classList.toggle('active');
}).card{
background: #000;
display: block;
width: 400px;
height: 50px;
color: white;
padding: 16px;
transition: .1s ease-in-out all;
cursor: pointer;
}
.collapse{
display:none;
height: 250px;
}
.card.active{
height: 300px;
}
.card.active .collapse{
display: block;
}<div class="card">
<p> post </p>
<div class="collapse">
<br>
<br>
<br>
<br>
<br>
<p>likes ............</p>
</div>
</div>編輯：如果您想在卡片內的按鈕上設定折疊，只需將事件偵聽器更改為它，但不要切換類
另一個編輯：要在引導程式中使用它，您可以自定義它
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card card-body" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<p>card</p>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>如果要在卡片內的按鈕上設定折疊，只需將這些屬性添加data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"到按鈕
let icon = document.querySelector('.icon');
icon.addEventListener('click', () => {
icon.classList.toggle('flip');
});.icon {
position: absolute;
right: 0;
outline: none !important
}
.icon svg {
transition: .2s ease all;
}
.icon.flip svg {
transform: rotate(180deg);
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card card-body w-70" style="cursor: pointer;">
<p>card</p>
<button class="btn icon" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420411.html
標籤：
上一篇：每次單擊按鈕時如何更改變數的值