Question

我正在寻找带有按钮的自举手风琴解决方案，以扩展手风琴，但我希望在展开时隐藏此按钮。

我的手风琴标题就像是手风琴内部文字的开头，如果我有按钮，那就会让视线感到不安。

如何在手风琴展开时隐藏此按钮，但在手风琴折叠时再次可见？

这里的问题是，当我点击标题，关闭手风琴时，按钮仍然消失，如果我再次点击标题，手风琴将会展开，但标题也会消失。如果可能，我想将标题保留为链接。

a[data-toggle='collapse'].collapsed  {
   visibility: visible;
}

a[data-toggle='collapse']  {
   visibility: hidden;
}

这是我到目前为止所做的：

https://jsfiddle.net/o93kwj80/2/

由于

Answer 1

如果隐藏标题，你将如何关闭手风琴？我为你找到了解决方案。如果单击标题，将隐藏标题并显示关闭图标。然后单击关闭图标，标题将显示，手风琴将关闭，关闭图标将被隐藏。

a[data-toggle='collapse'].collapsed .title  {
  display: block;
}
a[data-toggle='collapse'].collapsed .close  {
  display: none;
}

a[data-toggle='collapse'] .title  {
  display: none;
}
a[data-toggle='collapse'] .close  {
  display: initial;
}
.close {
  float: right;
  color: red;
}

请检查更新的小提琴：

https://jsfiddle.net/o93kwj80/3/

带按钮的Bootstrap Accordion，展开时隐藏

1 个答案: