使用引导程序创建带有嵌套链接/按钮的可折叠 div

Question

我想在可折叠 div 的下部创建一个带有一排按钮的可折叠“卡片”。 有点像twitter 卡，下方有一排按钮。 在这个例子中，卡片本身是可点击的（我希望它是可折叠的）。 就我而言，我希望在右侧有一个小箭头，指示可折叠 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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>

不幸的是，右侧的箭头不可点击且不旋转。

Answer 1

我建议您阅读此页面的 Bootstrap 文档： https://getbootstrap.com/docs/5.1/components/collapse/

这里有你需要的一切。

Answer 2

这是一个折叠的例子，但如果你想将点击者重定向到作者的页面，他将看不到折叠

 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>

编辑：如果要在卡内的按钮上设置折叠，只需将事件侦听器更改为它，而不是 class 切换

另一个编辑：要在引导程序中使用它，您可以自定义它

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>