时间戳

首页 > 解决方案 > 创建折叠前主要内容部分可见的手风琴

javascript - 创建折叠前主要内容部分可见的手风琴

问题描述

我正在尝试创建一个手风琴，其中内容的第一部分在折叠之前已经可见。

问题是我只是不知道从哪里开始。一个基本的手风琴很简单，但是如何在手风琴折叠之前显示内容的开头（例如内容的前 30 个字符变灰）？

我从这篇文章中的“预告片”建议的结构开始。我希望“预告片”成为内容中显示的前几个字符，当您单击折叠时，会显示主要内容并且预告片会消失。

知道该怎么做吗？

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
           href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Why a rose is what you need
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body" style="color:#d9d9d9" >
   A rose is the ideal flower you need because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" 
         role="tabpanel" aria-labelledby="headingOne">

      <div class="panel-body">
    A rose is the ideal flower you need because it's the flower all girls love to get. Offer one for Valentine's Day and she'll be yours blablabla
      </div>
    </div>
  </div>
</div>

标签： javascripthtmlcssbootstrap-4accordion

解决方案

从您的代码中分离出一个使用 javascript 在显示和隐藏内容之间切换的简单示例。我创建了一个函数，它使用元素 ID 来选择 em 并选择一个hide类。然后我将此函数传递给您的a元素。

var expandable = function() {
  var panelContent = document.getElementById("content-body");
  panelContent.classList.toggle("hidden");

  var panelBody = document.getElementById("content-head");
  panelBody.classList.toggle("hidden");
}
.hidden {
  display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" onclick="expandable()" aria-expanded="true" aria-controls="collapseOne">
          Why a rose is what you need
        </a>
      </h4>
    </div>
    <div id="content-head" class="panel-teaser panel-body" style="color:#d9d9d9">
      A rose is the ideal flower you need because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

      <div id="content-body" class="panel-body hidden">
        A rose is the ideal flower you need because it's the flower all girls love to get. Offer one for Valentine's Day and she'll be yours blablabla
      </div>
    </div>
  </div>
</div>

推荐阅读