带有预览和溢出扩展的 Bootstrap 4 折叠面板

Posted

技术标签:

【中文标题】带有预览和溢出扩展的 Bootstrap 4 折叠面板【英文标题】：Bootstrap 4 collapse panel with preview and overflow expansion 【发布时间】：2018-12-16 02:52:03 【问题描述】：

我正在尝试用example 来实现这个看似simple bootstrap setup 的功能，它显示了溢出文本的小预览，并为溢出添加了一个可扩展面板。问题是它是为 BS3 设计的，我需要 BS4 来制作卡片。它没有按照我的方式工作，我不确定它是否与 BS3/4 不兼容，因为即使我使用 BS3 CDN（<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 和 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>），它也不能像在示例中确实如此...甚至没有关闭，没有按钮，没有文本，只有标题“Bacon Ipsum”。

老实说，我对 html、JS、CSS 和 CDN 不太擅长……所以我可能会走得很远。如果我没有使用正确的 CSS 或 JS CDN，请告诉我。我唯一改变的是一个类的 div id。我已经用手风琴类完成了一些类似的事情，但是没有一个与预览和一个文本部分完全一样的东西（不是一个用于预览，另一个在展开时显示）。

index.html：（使用最后加载的 style.css 和正文部分底部的 JS CDN 进行编辑）

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <h3>Bacon Ipsum</h3>
        <p class="collapse" id="collapseExample" aria-expanded="false">
          Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon
          landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork
          chop chicken ham hock beef ribs turkey jerky. Shoulder beef capicola doner, tongue tail sausage short
          ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim
          capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin
          shankle. Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
        </p>
        <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample"
           aria-expanded="false" aria-controls="collapseExample"></a>
      </div>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

style.css：

.module 
    width: 500px;


.module p.collapse[aria-expanded="false"] 
    display: block;
    height: 40px !important;
    overflow: hidden;


.module p.collapsing[aria-expanded="false"] 
    height: 40px !important;


.module a.collapsed:after  
    content: '+ Show More';


.module a:not(.collapsed):after 
    content: '- Show Less';


body 
        padding-top: 60px;
        padding-bottom: 40px;
      

.bs-example 
  margin: 20px;

如果我可以将它与this 结合起来作为省略号，那就太好了！

更新

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <h3>Bacon Ipsum</h3>
        <p class="collapse" id="collapseExample" aria-expanded="false">
          Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon
          landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork
          chop chicken ham hock beef ribs turkey jerky. Shoulder beef capicola doner, tongue tail sausage short
          ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim
          capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin
          shankle. Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
        </p>
        <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample"
           aria-expanded="false" aria-controls="collapseExample"></a>
      </div>
    </div>
  </body>
</html>

style.css：

body 
  padding-top: 2rem;


.module .collapse, .module .collapsing 
  height: 3rem;  /* [NUM_OF_LINES] x [LINE_HEIGHT] */


.module .collapse 
  position: relative;  /* For ...'s content absolute positioning */
  display: block;
  overflow: hidden;


.module .collapse:before 
  content: ' ...';
  position: absolute;
  right: 0;
  bottom: 0;


.module .collapse.show 
  height: auto;  /* You need to reset the height when not collapsed */


.module .collapse.show:before 
  display: none;  /* Of course you don't want to display ... */


.module a.collapsed:after 
  content: '+ Show More';


.module a:not(.collapsed):after 
  content: '- Show Less';

CSS 直接从 jfiddle 示例中复制而来。 html 放置在实际的 html 标记中，虽然我在此示例中没有使用卡片，但可折叠面板将位于所述卡片内。

这是输出：

我可以看到源代码中的主要（和折叠的）文本，但它不可见。如果有其他有用的诊断信息，请告诉我。显然，您的解决方案来自提供的示例，但这里有一些问题。如果重要，这将通过 django 模板呈现。

【问题讨论】：

您使用 Bootstrap 4 的（不受支持的）Alpha 版本之一是否有特定原因？你最好使用当前版本 - bootstrapcdn.com 就像我说的，前端很糟糕。感谢您的链接。尝试换掉它，但没有区别。 【参考方案1】：
    您的&lt;div&gt; 元素无效，因为它具有多个类属性：class="module" 和class="container"。第一个类声明将覆盖所有后续值，因此您的 &lt;div&gt; 将只有 module 类。 您不必只使用[aria-expanded="false"] 定位&lt;p&gt;。您可以通过删除 CSS 中的内容来使其更通用。 您需要在显示折叠元素时重置高度。 Bootstrap 4 使用一个名为 show 的 CSS 类，因此您可以为此编写 CSS 来重置高度。 要为文本溢出显示省略号样式，通常只需使用 CSS3 text-overflow 与 overflow: hidden; 和 white-space: nowrap;。但是，text-overflow 仅适用于单行文本。要破解它，您必须对 ... 内容使用绝对定位。 在演示中，我在折叠时显示 2 行文本。为了计算高度，我只用了 [NUM_OF_LINES] 乘以 [LINE_HEIGHT]，在 bootstrap 中是 1.5。这就是我想出3rem 的原因。

HTML

<div class="container">
    <div class="module">
        <h3>Bacon Ipsum</h3>
        <p class="collapse" id="collapseExample" aria-expanded="false">
          Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon     
          landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork 
          chop chicken ham hock beef ribs turkey jerky. Shoulder beef capicola doner, tongue tail sausage short 
          ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim 
          capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin 
          shankle. Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
        </p>
        <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" 
         aria-expanded="false" aria-controls="collapseExample"></a>
    </div>
</div>

CSS

.module .collapse, .module .collapsing 
    height: 3rem;


.module .collapse 
    position: relative;
    display: block;
    overflow: hidden;


.module .collapse:before 
    content: ' ...';
    position: absolute;
    right: 0;
    bottom: 0;


.module .collapse.show 
    height: auto;


.module .collapse.show:before 
    display: none;


.module a.collapsed:after 
    content: '+ Show More';


.module a:not(.collapsed):after 
    content: '- Show Less';

结构

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        ...

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </body>
</html>

演示

小提琴：https://jsfiddle.net/davidliang2008/cu0p613v/

【讨论】：

感谢您的解决方案和演示！我确定这是要走的路，但是仍然没有正确注册。请参阅上面的页面输出更新。也许我没有以正确的方式调用正确的 CDN。谢谢。 还想补充一下，我可能搞砸了。在我能够使用折叠面板和手风琴之前，但现在这些都没有渲染，即使使用之前的 4.0-alpha 版本，我也无法让它工作。我认为这是我正在使用的 CDN 链接/版本。以上是我所拥有的。 那么，当您运行您的应用程序时，您的控制台是否有任何错误？也许在你运行你的应用程序时按 F12 截屏你的开发者工具/控制台？ 完成，在开发控制台打开并突出显示折叠 div 的情况下查看新屏幕截图；它没有被掩盖，按钮也没有。控制台中根本没有错误。如果您希望我截取其他更有帮助的内容，请告诉我。我随时为您服务，并感谢您的帮助。 您需要最后加载您的style.css。否则其他 css 类将覆盖自定义样式。此外，最好将所有 javascripts 放在 &lt;body&gt; 标记的末尾而不是 &lt;head&gt; 标记中。【参考方案2】：

不完全是提问者想要的样子，但这可能对其他人有所帮助。

您可以在所有文本上方设置一个可点击的 div，并通过透明度过渡使其“消失”：

它将部分显示 div 中的任何内容，直到 .module .collapse CSS 中定义的高度

它由一个相对的模块父级和一个绝对的.read-more组成：

.module 
  position: relative;


.module .collapse,
.module .collapsing 
  height: 7rem;


.module .collapse 
  display: block;
  overflow: hidden;


.module .collapse.show 
  height: auto;


.read-more 
  opacity: 1;
  transition: all .3s linear;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, transparent 60%, white);


.read-more:not(.collapsed) 
  opacity: 0;


.module 
  position: relative;


.module .collapse,
.module .collapsing 
  height: 7rem;


.module .collapse:not(.show) 
  display: block; /* By default the bootstrap collapse has a display: none */
  overflow: hidden;


.module .collapse.show 
  height: auto;


.read-more 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* 60% is where it should start the transition from transparent to white, increase it if you want to show more of your text */
  background-image: linear-gradient(to bottom, transparent 60%, white);
  
  /* The opacity and transition is just to smooth out the effect */
  opacity: 1;
  transition: all .3s linear;


.read-more:not(.collapsed) 
  opacity: 0;
  /* If you want to make the clickable area disapear once it is open, change the visibility to hidden */
  /* visibility: hidden; */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="module">
  <a class="read-more collapsed" data-toggle="collapse" href="#collapseExample" role="button"></a>
  <div class="collapse" id="collapseExample" aria-expanded="false">
    <h3>Bacon Ipsum</h3>
    <p>
      Bacon ipsum dolor amet doner tongue cow frankfurter hamburger rump salami tail. Ham chuck pork chop turducken filet mignon, sausage pancetta capicola. Alcatra ribeye shank tri-tip boudin. Beef ribs tenderloin bresaola tongue, salami hamburger ham boudin
      pork belly sausage. Chuck beef boudin drumstick doner ball tip. Cupim filet mignon hamburger, pork loin ground round cow ribeye t-bone shoulder pastrami kielbasa corned beef pork chop strip steak. Chislic kielbasa picanha sirloin shankle short
      ribs jerky prosciutto andouille short loin.
    </p>
  </div>
</div>

代码笔： https://codepen.io/lucaskuhn/pen/OJNgdPv

【讨论】：

以上是关于带有预览和溢出扩展的 Bootstrap 4 折叠面板的主要内容，如果未能解决你的问题，请参考以下文章

带有折叠状态图标的 Bootstrap 4 可折叠卡片

bootstrap 3折叠导航栏问题，导航栏标题溢出

Bootstrap 4 可折叠卡片 - 断断续续的动画

Bootstrap 在初始状态下折叠菜单箭头

带有可折叠侧导航和 Bootstrap 3 的幻影间距

带有多个按钮和 div 的 Bootstrap 折叠