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

【问题标题】：Creating a collapsible div with nested links/buttons with bootstrap使用引导程序创建带有嵌套链接/按钮的可折叠 div
【发布时间】：2022-01-24 17:39:47
【问题描述】：

我想在可折叠 div 的下部创建一个带有一排按钮的可折叠“卡片”。有点像twitter card，它的下侧有一排按钮。在这个例子中，卡片本身是可点击的（我希望它是可折叠的）。就我而言，我希望在右侧有一个小箭头，指示可折叠 div 是折叠还是展开。此外，我想在可折叠的 div 中（按钮行上方）编写多个段落。

我尝试了几件事，但我还没有弄清楚如何做到这一点。这应该不会太难，但我不是一个很好的编码器，所以如果有人可以提供帮助，我将非常感激。

我已经用 bootstrap 尝试了以下操作

.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>

遗憾的是，右侧的箭头不可点击且无法旋转。

【问题讨论】：

因此，一张卡片会在点击时重定向，右侧的箭头会折叠/取消折叠它。到底什么会被折叠（因为你说底部按钮总是可见的）？
对不起，如果我没有很好地解释。我只想在单击链接时重定向。我希望 div 能够在我单击的任何位置展开（链接除外）。例如，被折叠的东西可以包含关于在可折叠 div 中写入的东西的更多信息。我的代码 sn-p 做了我想做的一切，除了箭头不旋转，而它应该旋转。另外，当我点击箭头时，什么也没有发生，我也无法解决。

标签： javascript html css twitter-bootstrap web

【解决方案1】：

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

这里有你需要的一切。

【讨论】：

我在本文档中找不到如何在可点击（或可折叠）div 中放置链接。

【解决方案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>

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

另一个编辑：要在bootstrap中使用，可以自定义

<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>

【讨论】：

感谢您的回答，但这不是我的意思。我不希望喜欢...展开，但我希望它们包含在可点击 div 的下部。
我添加了 sn-p，它已经完成了我想要的大部分工作，但我无法使用 bootstrap 使其正常工作
引导程序？哦，那你需要另一个代码，我会进行引导折叠，然后自定义它。
我也尝试了引导崩溃，但我也无法使其工作。此外，我希望在 div 的右侧有一个箭头。如果您能帮助我，我将不胜感激:)
您所做的其他编辑效果很好，谢谢。但是，我还希望在可折叠（上）卡片内部有一个可点击的。例如带有可点击 link 的文本
卡片