首页 文章

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

提问于
浏览
0

我正在寻找一个带有一个按钮来扩展手风琴的自举手风琴的解决方案,但我希望在它扩展时隐藏这个按钮 .

我的手风琴 Headers 就像手风琴内部文字的开头一样,如果我有按钮,那就会让视线感到不安 .

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

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

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

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

这是我到目前为止:

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

谢谢

1 回答

  • 0

    如果隐藏 Headers ,你将如何关闭手风琴?我为你找到了解决方案 . 如果单击 Headers ,将隐藏 Headers 并显示关闭图标 . 然后单击关闭图标, Headers 将显示,手风琴将关闭,关闭图标将被隐藏 .

    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/

相关问题